首页 > 代码库 > [Angular Directive] Create a Template Storage Service in Angular 2

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

2024-09-01 08:10:31   215人阅读

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


联系
我们