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

  • 相关阅读:
    Git查看、删除远程分支和tag(转自:http://zengrong.net/post/1746.htm)
    设计模式工厂模式
    Android SystemProperties和Settings.System介绍(转自http://www.linuxidc.com/Linux/201108/40887.htm)
    设计模式原型模式
    设计模式建造者模式(转自:http://www.cnblogs.com/cbf4life/archive/2010/01/14/1647710.html)
    读取其他程序的sharedpreference
    eclipse下导入android源码
    国外程序员推荐:每个程序员都应读的书(转自:http://blog.jobbole.com/5886/)
    Android系统如何实现UI的自适应(在res下找对应目录)【转】
    Android Provision (Setup Wizard) (转自:http://blog.csdn.net/thl789/article/details/7803439)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8886046.html
Copyright © 2011-2022 走看看