Не удалось получить элемент по ID в ngIf

Question

Я играл с A2 на некоторое время, и я понимаю, что моя проблема связана с последовательностью, в которой все инициализируется и запускается внутри A2 и из-за *ngIf в html, но я не понимаю, почему и как получить желаемый результат.

С помощью следующего тестового компонента:

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

То, что я не понимаю, почему, даже в ngOnInit в console.log из test1 возвращает null, где, как test2 возвращается в элемент. Я знаю, что это потому, что его в *ngIf, но я не понимаю, почему и что делать, чтобы получить доступ к этому элементу, как только его визуализации, чтобы я мог взаимодействовать с ним как часть API Google Maps

EDIT Обновлено некоторые код, который я бы глупо исключал.

Answer 1

Вы можете обратиться к DOM element в ngAfterViewInit крючок жизненного цикла, если вы используете какой-либо angular context на этом элементе. Вы можете ожидать DOM element(with Angular context) to be fully available in ngAfterViewInit жизненный цикл крюк.

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


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