第二次进入页面时报Cannot read property 'nativeElement' of undefined错误求助

嘿，这个问题我之前也帮人排查过，核心是Angular的视图初始化时机和组件复用的坑，我给你拆解下原因和解决办法：

问题根源 #

第一次进入页面时，组件是全新创建的，有时候浏览器渲染速度快，ngOnInit执行时视图刚好渲染完成，@ViewChild能侥幸拿到元素；但第二次进入时，要么组件被路由复用了（没重新初始化），要么ngOnInit执行时视图还没完全渲染，导致@ViewChild获取到的元素是undefined，自然就报错了。

具体解决方案 #

1. 把初始化代码移到ngAfterViewInit钩子 #

Angular明确规定，@ViewChild装饰器获取的DOM元素，要等到ngAfterViewInit钩子触发时才完全可用，这是视图渲染完成后的第一个钩子。修改代码如下：

@ViewChild('search') public searchElement: ElementRef;
@ViewChild('searchPlaces') public searchPlacesElement: ElementRef;
@ViewChild('myInput') public myInput: ElementRef;

ngAfterViewInit() {
  this.mapsApiLoader.load().then(() => {
    // 用可选链操作符做安全访问，避免空值报错
    if (this.searchElement?.nativeElement) {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types:['(cities)']});
      autocomplete.addListener("place_changed", () => {
        // 这里写你的place_changed回调逻辑
      });
    }
  });
}

2. 处理路由复用的情况 #

如果你的项目用了路由复用策略（比如自定义了RouteReuseStrategy），第二次进入页面时组件不会重新初始化，ngAfterViewInit也不会再次执行。这时候需要监听路由事件，每次组件被激活时重新初始化Autocomplete：

import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

@Component(/* 你的组件元数据 */)
export class YourComponent {
  @ViewChild('search') public searchElement: ElementRef;
  private routeSub: Subscription;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由导航结束事件，判断当前是否进入目标页面
    this.routeSub = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd && this.activatedRoute.snapshot.url[0].path === '你的页面路由路径') {
        this.initAutocomplete();
      }
    });
  }

  ngAfterViewInit() {
    this.initAutocomplete();
  }

  private initAutocomplete() {
    this.mapsApiLoader.load().then(() => {
      if (this.searchElement?.nativeElement) {
        // 先销毁已存在的Autocomplete实例，避免重复绑定事件
        const existingAuto = google.maps.places.Autocomplete.getInstance(this.searchElement.nativeElement);
        if (existingAuto) {
          existingAuto.unbindAll();
        }
        const autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types:['(cities)']});
        autocomplete.addListener("place_changed", () => {
          // 你的回调逻辑
        });
      }
    });
  }

  ngOnDestroy() {
    // 记得取消订阅，避免内存泄漏
    if (this.routeSub) {
      this.routeSub.unsubscribe();
    }
  }
}

3. 始终使用可选链操作符 #

不管用哪种方案，都建议用?.可选链操作符来访问nativeElement，这样即使元素没加载完成，也只会返回undefined而不会抛出错误，让代码更健壮。

内容的提问来源于stack exchange，提问作者D.Hodges