zoukankan      html  css  js  c++  java
  • [Angular Directive] Create a Template Storage Service in Angular 2

    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'));
      }
    }
  • 相关阅读:
    1144 The Missing Number (20分)
    1145 Hashing
    1146 Topological Order (25分)
    1147 Heaps (30分)
    1148 Werewolf
    1149 Dangerous Goods Packaging (25分)
    TypeReference
    Supervisor安装与配置()二
    谷粒商城ES调用(十九)
    Found interface org.elasticsearch.common.bytes.BytesReference, but class was expected
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6291147.html
Copyright © 2011-2022 走看看