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

  • 相关阅读:
    php---观察者模式
    elasticsearch常用查询和注意点
    linux镜像iso格式
    Mysql查询今天、昨天、7天、近30天、本月、上一月数据
    php常用算法
    算法之斐波纳契数列递归和迭代实现
    带你了解session和cookie作用原理区别和用法
    mysql大数据量的分页优化
    常用链接
    自然语言处理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8886046.html
Copyright © 2011-2022 走看看