Impossible d'obtenir l'élément par ID dans ngIf

Question

Je joue avec A2 depuis quelque temps maintenant et je comprends que mon problème est dû à la séquence dans laquelle tout s'initialise et s'exécute dans A2 et en raison du *ngIf dans le html mais Ce que je ne comprends pas, c'est pourquoi ou comment obtenir le résultat souhaité.

Utilisation du composant test suivant:

@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 
    } 
} 

et test.component.html

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

Ce que je ne comprends pas pourquoi, même dans le ngOnInit les console.log de test1 retours null où que test2 retourne les élément. Je sais qu'il est parce que son dans le *ngIf, mais je ne comprends pas pourquoi ou quoi faire pour accéder à cet élément une fois son rendu pour que je puisse interagir avec lui dans le cadre de l'API Google Maps

EDIT Mise à jour certains code que j'avais sottement exclu.

Answer 1

Vous pouvez vous référer à un DOM element dans ngAfterViewInit crochet du cycle de vie si vous utilisez un angular context sur cet élément. Vous pouvez attendre DOM element(with Angular context) to be fully available en ngAfterViewInit crochet de cycle de vie.

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


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