在 Angular 中使用 ViewChild 选择特定属性指令

Question

我有几个使用mdTooltip属性指令的元素（这就是所谓的对吗？）

@Component({
    selector: 'status-bar',
    template: '<md-icon #iconOne mdTooltip="Connected">check_circle</md-icon>
               <md-icon #iconTwo mdTooltip="Disconnected">warning<md-icon>'
})

我可以使用toggle()以下方法调用该方法：iconOne

export class StatusBarComponent implements OnInit {
    @ViewChild(MdTooltip) myIcon: MdTooltip;

    ngOnInit(): void {
        this.myIcon.toggle();
    }
}

按照我的理解，我应用属性指令的元素有点成为属性指令的类型。所以我尝试iconTwo这样选择：

@ViewChild('iconTwo') myIcon: MdTooltip;

一旦执行代码，就会出现错误：

_this.myIcon.toggle 不是函数

我猜该项目没有正确选择。如何定位第二个图标并切换它？

Answer 1

使用额外的参数让 Angular 返回指令的引用

     @ViewChild('id2', { read: MyDir }) id2 : MyDir; 

我认为您不需要为组件执行此操作。如果指令exportAs在元数据中使用，您可以将 ref 变量分配给该exportAs属性。

 <div my-dir #id2="myDir"></div>

这是一个例子：

 @Directive({
    selector: '[my-dir]'
  })
  export class MyDir{
    @Input() id: number;

    toggle() {
      console.log('say hi', this.id);
    }   
  }

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <button (click)="toggle2()">toggle 2</button>
        <h2 my-dir [id]="'1'">Hello 1</h2>
        <h2 my-dir #id2 [id]="'2'">Hello 2</h2>
      </div>
    `,
  })
  export class App {
    @ViewChild('id2', {read:MyDir}) id2 : MyDir;

    constructor() {
    }

    toggle2() {
      this.id2.toggle();
    }
  }