是否可以对不同元素使用相同的模板引用变量？

Question

考虑这种情况，两个不同的div永远不会同时存在：

<!-- Mutually exclusive containers -->

<ng-container *ngIf="predicate">
  <div #myRef>
    ...
  </div>
</ng-container>

<ng-container *ngIf="!predicate">
  <div #myRef>
    ...
  </div>
</ng-container>

而且，在我的组件中：

@ViewChild('myRef', {read: ElementRef}) private myRef: ElementRef;

// do something with myRef...

Answer 1

可以。 即使您的模板中有2个相同的模板引用，如果尝试使用@ViewChild进行获取，也会获得第一个引用。

<ng-container >
  <div #myRef>
  <p> this is the first content, </p>
    </div>
</ng-container >


<ng-container >
    <div #myRef>

  <p> this is  the Seoncd content, </p>
    </div>
</ng-container >

 @ViewChild('myRef') myRef;

  ngAfterViewInit(): void {
    console.log(this.myRef.nativeElement);
  }