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

【问题标题】：Select specific attribute directive using ViewChild in Angular在 Angular 中使用 ViewChild 选择特定的属性指令
【发布时间】：2017-05-04 22:52:43
【问题描述】：

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

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

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

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

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

我理解它的方式，我应用属性指令的元素，有点成为属性指令的类型。所以我试着像这样选择iconTwo：

@ViewChild('iconTwo') myIcon: MdTooltip;

一旦代码被命中，这会导致错误：

_this.myIcon.toggle 不是函数

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

【问题讨论】：

如果您有一个 icon 实例，@ViewChild(..) myIcon 将工作，因为有两个实例。 @ViewChild 将在两者之间发生冲突。所以你需要明确定义它
@Aravind - 'iconTwo' 没有明确定义它吗？我对 Angular 很陌生，我找不到任何文档，可能是因为我不知道术语。

标签： angular material-design angular-material

【解决方案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();
    }
  }

【讨论】：

谢谢，这正是我想要的。为什么文档中没有明确说明这一点...任何描述此内容的官方文档的链接？我只看到angular.io/docs/ts/latest/api/core/index/…，只是提到了元数据中的“读取”选项，但没有示例：/
我知道它没有很好的文档记录。我阅读了 Angular 源代码。

【解决方案2】：

您也可以绑定到它并使用 1 个图标。

<md-icon [mdTooltip]="connectStr">{{icon}}</md-icon>

Here's a Plunker

【讨论】：

感谢您的建议，我意识到了这一点，但我的页面上什至超过 2 个图标（问题已简化），我想借此机会了解更多有关 Angular 的信息，具体如何定位我需要的元素。