模板解析错误：引用“#XXX”在 angular 中定义了多次

Question

我想使用同名的模板引用变量在@ViewChildren进行查询。

Metadata Properties:

selector - the directive type or the name used for querying.
read - read a different token from the queried elements.

但是，我遇到了 模板解析错误:

Reference "#abc" is defined several times

样本：

import {AfterViewInit, Component, Directive, Input, QueryList, ViewChildren, ElementRef} from '@angular/core';

@Directive({selector: 'pane'})
export class Pane {
  @Input() id: string;
}

@Directive({selector: 'pane1'})
export class Pane1 {
  @Input() id: string;
}

@Component({
  selector: 'app-root',
  template: `
    <span #abc id="1"></span>
    <pane1 #abc id="2"></pane1>
    <pane #abc id="3" *ngIf="shouldShow"></pane>
    <button (click)="show()">Show 3</button>
    <button (click)="hide()">Hide 3</button>

    <div>panes: {{serializedPanes}}</div> 
  `,
})
export class ViewChildrenComp implements AfterViewInit {
  @ViewChildren('abc') panes: QueryList<ElementRef>;
  serializedPanes: string = '';

  shouldShow = false;

  show() { this.shouldShow = true; }
  hide() { this.shouldShow = false; }

  ngAfterViewInit() {
    this.calculateSerializedPanes();
    this.panes.changes.subscribe(
      (r) => {
      this.calculateSerializedPanes(); 
    });
  }

  calculateSerializedPanes() {
    setTimeout(
      () => {
        this.serializedPanes = this.panes.map(p => p.nativeElement.id).join(', '); 
      }, 0);
  }
}

问题：
1.是否可以在模板中定义同名的模板引用变量？
2.如何使用相同的选择器查询多个元素，而不是单独定义名称？

Answer 1

不能在一个模板中定义同名的模板引用变量。

您只能在不同的模板中定义它，包括 EmbeddedViewTemplate，即

<div #abc>
  <ng-template #abc>
    <ng-template>
      <div #abc></div>
    </ng-template>
  </ng-template>
</div>

应该可以

或

<div #abc>
  <ng-template #abc>
    <div #abc></div>
  </ng-template>
  <ng-template #abc>
    <div #abc></div>
  </ng-template>
</div>

应该也可以

How to query multiple elements using the same selector, not defining names individually?

你可以像这样定义指令

@Directive({selector: '[id]'}) 
export class Abc {
  constructor(public elRef: ElementRef) {}
}

选择器可以是[abc]那么你需要给所有元素添加abc属性

<span abc id="1"></span>
<pane1 abc id="2"></pane1>
<pane abc id="3" *ngIf="shouldShow"></pane>

但是因为你已经定义了 id 我用它作为选择器

之后你可以使用上面提到的 Abc 指令作为 @ViewChildren

的选择器

@ViewChildren(Abc) panes: QueryList<ElementRef>;

this.serializedPanes = this.panes.map(p => p.elRef.nativeElement.id).join(', ');

Plunker Example

但是有一些技巧可以帮助我们多次拥有一个变量。 只需将您的元素包装到另一个元素中即

 <div>
   <span #abc id="1"></span>
   <pane1 #abc id="2"></pane1>
   <pane #abc id="3" *ngIf="shouldShow"></pane>
 </div>

或

<ng-container>
  <span #abc id="1"></span>
  <pane1 #abc id="2"></pane1>
  <pane #abc id="3" *ngIf="shouldShow"></pane>
</ng-container>

Plunker Example

模板解析错误：引用“#XXX”在 angular 中定义了多次

Template parse errors: Reference "#XXX" is defined several times in angular

viewchild

angular