Почему компонент API карт Google работает без * NgIf, но работает, если исключен? Angular 9

Question

Я попытался выполнить шаги, изложенные в этой теме . Он работает для загрузки окон поиска с этим компонентом:

map.component. html

<input id= 'box2'  *ngIf="boxReady" class="controls" type="text" placeholder="Search Box">
<input id = 'box' class="controls" type="text" placeholder="Search Box">

map.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {GoogleAPIService} from '../google-api.service';
declare var google: any;
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  @Input() boxIdVar: string;
  // @Input() id: string;
  boxReady = false;

  constructor(private _google: GoogleAPIService){}

  ngOnInit(): void {
    if (typeof google !== 'undefined') {
      console.log(google);
      console.log('Map.NgInit');
      console.log(this.boxIdVar);
      this.boxReady = true;
      let input = document.getElementById('box');
      let originSearch = new google.maps.places.SearchBox(input);
      input = document.getElementById('box2');
      let dest = new google.maps.places.SearchBox(input);
    }
    else {
      console.log('Google was undefined Map');
    }
  }
}

Однако, если я добавлю оператор * NgIf, который будет загружать один из блоков только тогда, когда компонент загружен, тогда это окно поиска больше не будет работать, и я получаю исключение необработанного обещания.

map.component. html

<input id= 'box2'  *ngIf="boxReady" class="controls" type="text" placeholder="Search Box">
<input id = 'box' class="controls" type="text" placeholder="Search Box">

в консоли обнаружена ошибка:

ERROR Error: "Uncaught (in promise): TypeError: b is null
v$.prototype.o@https://maps.googleapis.com/maps-api-v3/api/js/40/5/places_impl.js:78:66

Все это возникло из-за того, что я хотел динамически изменить идентификатор поля ввода. Но кажется, что всякий раз, когда элемент HTML имеет некоторую переменную angular, функциональность нарушается.

Answer 1

Вы запрашиваете DOM в ngOnInit(). Это слишком рано в жизненном цикле компонента для Angular, чтобы добавить его в DOM. Установка для *ngIf условия true не немедленно добавляет его в DOM.

Вместо этого вы должны запустить любой код, который требует элемент DOM позже в жизненном цикле компонента, в ngAfterViewInit().

Кроме того, более "Angular" способ получить элемент DOM - использовать @ViewChild().

<input *ngIf="boxReady" #box2 />

@ViewChild('box2') box2: ElementRef;

boxReady = false;

ngOnInit(): void {    
  this.boxReady = true;    

  const viewChild = this.box2 ? this.box2.nativeElement : null;
  console.log('ngOnInit viewChild', viewChild); // null
}

ngAfterViewInit() {  
  const viewChild = this.box2.nativeElement;
  console.log('ngAfterViewInit viewChild', viewChild);
}

DEMO: https://stackblitz.com/edit/angular-2um7rp