码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular Directive] Create a Template Storage Service in Angular 2

时间:2017-01-16 22:40:05      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:present   together   ade   rect   exp   private   import   test   tee   

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app.

 

We want to create a service and a component together to store all the templates.

service:

import {Injectable, TemplateRef} from "@angular/core";
@Injectable()
export class TemplatesService {
  templates = new Map<string, TemplateRef<any>>();
}

 

compoment:

import {Component, ViewChild} from "@angular/core";
import {TemplatesService} from "./shared/services/templates.service";
@Component({
  selector: ‘template-storage‘,
  template: `
    <template #header>
        <h1>This is header</h1>
    </template>
    <template #footer>
      <h1>This is the footer</h1>
    </template>
  `
})
export class TemplateStorageComponent {
  @ViewChild(‘header‘) headerTemplate;
  @ViewChild(‘footer‘) footerTemplate;
  constructor(private service: TemplatesService){

  }

  ngAfterViewInit() {
    this.service.templates.set(‘header‘, this.headerTemplate);
    this.service.templates.set(‘footer‘, this.footerTemplate);
  }
}

Here, set templates must to present in ‘ngAfterViewInit‘. 

 

Directive:

import {Directive, TemplateRef, ViewContainerRef} from "@angular/core";
import {TemplatesService} from "../services/templates.service";
@Directive({
  selector: ‘[surround]‘
})
export class SurroundDirective {
  constructor(
    private template: TemplateRef<any>,
    private view: ViewContainerRef,
    private service: TemplatesService
  ){}

  ngAfterViewInit(){
      this.view.createEmbeddedView(this.service.templates.get(‘header‘));
      this.view.createEmbeddedView(this.template);
      this.view.createEmbeddedView(this.service.templates.get(‘footer‘));
  }
}

 

[Angular Directive] Create a Template Storage Service in Angular 2

标签:present   together   ade   rect   exp   private   import   test   tee   

原文地址:http://www.cnblogs.com/Answer1215/p/6291147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!