Angular 2中*ngIf与#template能否结合使用？报错咨询

当然可以把*ngIf和模板引用变量（#xxx）结合使用啦！你遇到的Error: self.context.info is undefined错误，本质是作用域的问题，不是这两个特性不能兼容～

为什么会报错？ #

Angular的*ngIf指令会创建一个局部条件作用域：当*ngIf的条件（比如你的info）为false时，被它包裹的元素会被完全从DOM中移除，对应的模板引用变量也就失去了依附的对象。如果你的代码在*ngIf的作用域外部访问这个引用变量，或者在info还未初始化时就尝试调用它，就会触发undefined错误。

举个典型的错误写法：

<!-- *ngIf包裹的内容 -->
<div *ngIf="info">
  <p #infoDisplay>{{ info.detail }}</p>
</div>
<!-- 按钮在*ngIf作用域外，当info为false时infoDisplay不存在 -->
<button (click)="logContent(infoDisplay)">查看内容</button>

当info未定义或为false时，点击按钮就会报错，因为infoDisplay这个引用根本不存在。

正确的使用方式 #

只要保证引用变量只在*ngIf条件为真的作用域内被访问，就能正常结合使用，下面给两种常见的正确写法：

1. 把引用变量的使用放在*ngIf内部

将需要访问引用变量的元素（比如按钮、其他指令）和被引用的元素放在同一个*ngIf作用域里：

<div *ngIf="info">
  <p #infoDisplay>{{ info.detail }}</p>
  <!-- 按钮和infoDisplay同属*ngIf作用域，只有info为真时才存在 -->
  <button (click)="logContent(infoDisplay)">查看内容</button>
</div>

2. 在组件类中用ViewChild配合条件判断访问

如果必须在*ngIf外部操作引用变量，可以在组件类中通过ViewChild获取引用，但要在代码里判断*ngIf的条件是否满足，避免访问不存在的引用：

import { Component, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements AfterViewChecked {
  @ViewChild('infoDisplay') infoDisplay: ElementRef;
  info: any; // 你的数据对象

  ngAfterViewChecked() {
    // 只有当info存在时，才安全访问引用变量
    if (this.info) {
      const content = this.infoDisplay.nativeElement.textContent;
      console.log('内容：', content);
    }
  }
}

模板代码：

<div *ngIf="info">
  <p #infoDisplay>{{ info.detail }}</p>
</div>

总结 #

*ngIf和模板引用变量完全可以结合使用，关键是要注意作用域的边界——永远只在*ngIf条件为真的场景下访问对应的引用变量，就能避免undefined错误。

内容的提问来源于stack exchange，提问作者Gamos