在 Angular 中使用 ViewChild 选择特定的属性指令 [英] Select specific attribute directive using ViewChild in Angular

问题描述

我有几个元素使用了 mdTooltip 属性指令(就是这样称为对?)

@Component({选择器:'状态栏'，模板:'<md-icon #iconOne mdTooltip="Connected">check_circle</md-icon><md-icon #iconTwo mdTooltip="断开连接">警告<md-icon>'})

我可以使用以下方法调用 iconOne 上的 toggle() 方法:

导出类 StatusBarComponent 实现 OnInit {@ViewChild(MdTooltip) myIcon: MdTooltip;ngOnInit(): 无效 {this.myIcon.toggle();}}

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

@ViewChild('iconTwo') myIcon: MdTooltip;

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

<块引用>

_this.myIcon.toggle 不是函数

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

解决方案

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

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

我认为你不需要为组件做这件事.如果指令在元数据中使用 exportAs，您可以将 ref 变量分配给 exportAs 属性.

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

这是一个例子:

 @Directive({选择器:'[我的目录]'})导出类 MyDir{@Input() id:数字；切换(){console.log('say hi', this.id);}}@成分({选择器:'我的应用'，模板:`<div><button (click)="toggle2()">toggle 2</button><h2 my-dir [id]="'1'">你好1</h2><h2 my-dir #id2 [id]="'2'">你好 2</h2>

`，})出口类应用{@ViewChild('id2', {read:MyDir}) id2 : MyDir;构造函数(){}切换2(){this.id2.toggle();}}

I have a couple elements that utilize the mdTooltip attribute directive (That's what it's called right?)

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

I'm able to call the toggle() method on iconOne by using:

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

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

The way I understand it, the element to which I apply the Attribute Directive, kind of becomes the type of the attribute directive. So I tried to select iconTwo like this:

@ViewChild('iconTwo') myIcon: MdTooltip;

This results in an error once the code is hit:

_this.myIcon.toggle is not a function

I'm guessing the item wasn't properly selected. How do I target that second icon and toggle it?

解决方案

Use an extra parameter to make Angular return you a ref to the directive

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

I don't think you need to do it for components. If a directive uses exportAs in the metadata, you can assign ref variable to the exportAs attribute.

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

Here is an example:

 @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 中使用 ViewChild 选择特定的属性指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！