ngIf内のIDで要素を取得できません

Question

私はA2で少し遊んでいましたが、私の問題はすべてが初期化され、A2内で実行され、htmlの*ngIf私が理解していないのは、なぜ、またはどのように私の望む結果を得るかということです。

@Component({ 
    moduleId: module.id, 
    selector: 'test', 
    templateUrl: 'test.component.html' }) 

export class TestComponent implements OnInit { 
    test: any; 

    settest():void{ 
     //this.test = {test: 1}; --This works using ngAfterViewInit 

     //This causes the console.log in ngAfterViewInit to be null 
     this.route.params 
      .switchMap((params: Params) => this.testService.getTest(params['id'])) 
      .subscribe(test => { 
       this.test = test; 
     }); 
    } 

    ngOnInit(): void 
    { 
     this.settest(); 
     console.log(document.getElementById('test1')); --Null 
     console.log(document.getElementById('test2')); -- Not NUll 
    } 

    ngAfterViewInit(): void 
    { 
     console.log(document.getElementById('test1')); --Null 
     console.log(document.getElementById('test2')); -- Not NUll 
    } 
} 

とtest.component.html

<div *ngIf="test"> 
    <div id="test1"></div> 
</div> 
<div id="test2"></div> 

私は理解していないことも、nulltest2として戻っngOnInitconsole.logtest1のリターンで、理由は次のテストコンポーネントを使用して

素子。私はGoogleマップAPIの一部

EDITは、いくつかの更新として、それと対話することができ、私はそれは、その*ngIf内にある知っているが、私は理由を理解していないか、そのレンダリングされた後、その要素にアクセスするために何をすべきか私が愚かに除外したコード。

Answer 1

あなたがその要素上の任意のangular contextを使用している場合は、ライフサイクルフックngAfterViewInitでDOM elementを参照することができます。 DOM element(with Angular context) to be fully availablengAfterViewInitライフサイクルフックが期待できます。

ngOnInit(): void 
{ 
    this.settest(); 
    console.log(document.getElementById('test1')); // not rendered 
    console.log(document.getElementById('test2')); 
} 


ngAfterViewInit(){ 
    console.log(document.getElementById('test1')); // rendered 
}