zoukankan      html  css  js  c++  java
  • [Angular] Advanced DI

    In this post, we are going to see how to solve one design pattern challenge.

    The challenge is what we a simplest way to find out the children elements which belongs to Animals, which belongs to Materials inside the container component.

      <app-animals>
          <cat></cat>
          <dog></dog>
          <rock></rock>
          <fox></fox>
          <viking></viking>
      </app-animals>

    As we can see that:

      Animals are <cat>, <dog>, <fox>, <viking>.

           Material is <rock>.

    1. First way we might use is Tamplate Ref:

    <cat  #item></cat>
    <fox  #item></fox>
      // #item Ref
       @ContentChildren('item') itemRefsQL: QueryList<any>>
       const items = this.itemRefsQL.toArray();

    It will work, but the problem for this solution is that, the container should know what children it has. Also the chance that I might mis-mark the component.

    2. We can use 'directive' + {read: ElementRef}:

    animal.directive.ts:

    import { Directive } from '@angular/core';
    
    @Directive({
      // tslint:disable-next-line:directive-selector
      selector: '[animal]'
    })
    export class AnimalDirective {}
    <cat animal></cat>
    <dog animal></dog>
    @ContentChildren(AnimalDirective, {read: ElementRef}) directiveElementsQL: QueryList<ElementRef>;
    const directiveElements = this.directiveElementsQL.toArray();

    Here without {read: ElementRef}, it won't work. We need it to tell Angular we are actually looking for the host element of the directive. Not direcitve itself.

    But still the same problem as Tempalte Ref, we need to mark in the template to tell which component we need.

    3.  Similar to using directive only, but {read: <interface>}.

    We create a Animal interface and the component implements Animal interface.

    animal.ts:

    export abstract class Animal {
      name: string;
      abstract speak(): void;
      abstract clear(): void;
    }

    dog.component.ts:

    import { Component } from '@angular/core';
    import { Animal } from './animal';
    
    @Component({
      // tslint:disable-next-line:component-selector
      selector: 'dog',
      template: `
      <div>
        <img src="../assets/dog.jpg"/>
        <h3>{{saying}}</h3>
      </div>
      `,
    })
    // Subclasses Animal
    export class DogComponent extends Animal {
    
      name = 'Dog';
      saying: string;
    
      speak() {
        this.saying = 'Woof';
      }
    
      clear() {
        this.saying = '';
      }
    
    }

    Now what we can do is Query by Animal interface in the contianer component:

    <cat  animal ></cat>
      @ContentChildren(AnimalDirective, {read: Animal}) directiveAnimalsQL: QueryList<Animal>;
      const directiveAnimals  = this.directiveAnimalsQL.toArray();
      console.log("directiveAnimals", directiveAnimals);
    /*
    CatComponent {injector: Injector_, name: "Cat"}
    DogComponent {name: "Dog"}
    FoxComponent {name: "Fox"}
    VikingComponent {name: "Viking"}
    */

    4. Recommended: Finally we come to our recommended solution.

    Using alias Injection of the component itself.

    import { Component } from '@angular/core';
    import { Animal } from './animal';
    
    @Component({
      // tslint:disable-next-line:component-selector
      selector: 'fox',
      template: `
      <div>
        <img src="../assets/fox.jpeg"/>
        <h3>{{saying}}</h3>
      </div>
      `,
      providers: [
        { provide: Animal, useExisting: FoxComponent }
      ]
    })
    export class FoxComponent implements Animal {
      name = 'Fox';
      saying: string;
    
      speak() {
        this.saying = 'ring-ding-ding-ding-dingedinging';
      }
    
      clear() {
        this.saying = '';
      }
    
    }

    For the animals related component, we inject the provider 'useExisting', so it always refer to the same instance. And we use interface Animal as alias.

    Now, our container can be really clean:

          <cat ></cat>
          <dog></dog>
      // Any projected component with an Animal "interface" in its injector
       import { Animal } from './animal';
      @ContentChildren(Animal) animalsQL: QueryList<Animal>;
    
      ngAfterContentInit() {
         const animals = this.animalsQL.toArray();
      }

    Talk, Github

  • 相关阅读:
    python3 flask 文件下载服务器
    jquery cdn加速
    cherry 与sqlite
    cherry 与react.js
    cherrypy json 解析
    cherrypy cookies
    cherrypy 打印日志
    cherrypy pytest 覆盖,测试代码
    cherrypy ajax 请求
    cherrypy 访问css文件
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8886046.html
Copyright © 2011-2022 走看看