Angular4：変数の値に基づいてコンポーネントを見つける方法

Question

10個のdiv要素があり、10個のdivの内側に配置される特別な要素があるとします。

まず、私は、これらのdiv要素のそれぞれがテンプレートを持つことになり、この特別な要素がどうあるべきかのdiv要素で決定した属性（名前の「場所」を持っているサービスを保持するために考えて：。

<div [num] = "num"> 
    <div *ngIf = "num == service.location"> Special</div> 
</div> 

この場合、それぞれのdiv要素が非効率的であるサービスからロケーション属性を読み取ることがあります。

しかし、私はそれがより効率的に行うことができるかどうかと思った。私は/リスナーのいくつかの種類を置くことについて考えました変数 'location'をオブザーバに渡し、変更するたびに、特別な要素をapproprの内部に配置しますiate要素。この場合、私はO（1）の複雑さでそれを行うことができます。

あなたがそれを手助けできる角度技術をご存知ですか？

Answer 1

次のことが可能です。

1. を見つけるngAfterViewInitで、その後、そのクエリの後に特定のdiv
2. に特殊な属性、これらすべてのdiv（ダミー子ディレクティブだけのマーカーとして付き）

3. を追加1つは特別な属性を持つものです。

   @Directive({selector: '[child-directive]'}) 
   export class ChildDirective { 
   } 
   
   @Component({ 
       selector: 'my-app', 
       template: ` 
       <div> 
        <div child-directive>Hi</div> 
        <div child-directive [attr.special]="test">special</div> 
        <div child-directive>Hi</div> 
       </div> 
       `, 
   }) 
   export class App implements AfterViewInit { 
       @ViewChildren(ChildDirective, {read: ElementRef}) children: QueryList<ElementRef>; 
       test = true; 
   
       constructor() { 
       } 
   
       ngAfterViewInit() { 
       const special = this.children.find(el=> { 
        let native = el.nativeElement; 
        if(native.getAttribute("special")) { 
        return true; 
        } 
        else { 
        return false; 
        } 
       }); 
       console.log(special); 
       } 
   }