在 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屋!