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

Question

Consider this case, where the two different divs never exist at the same time:

<!-- Mutually exclusive containers -->

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

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

And, in my component:

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

// do something with myRef...

Answer 1

Yes you can have. Even if you have 2 same template ref in your template, if you try to fetch using @ViewChild then you will get the first ref.

<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);
  }