[英]Select component instance by directive via @ViewChildren in Angular?
I have multiple components, such as FirstTabComponent
, SecondTabComponent
, etc... 我有多个组件,例如
FirstTabComponent
, SecondTabComponent
等。
In the parent component I need to be able to select all component instances. 在父组件中,我需要能够选择所有组件实例。
I tried to use a common directive as a selector, but it only allows me to select either a Directive Instance or a Component Instance... 我试图使用一个通用指令作为选择器,但是它只允许我选择一个指令实例或一个组件实例...
@Directive({selector: '[tab]'})
export class Tab {}
export interface Tab {
goNext(): Observable<any>;
}
@Component({...})
export class FirstTabComponent implements Tab {}
@Component({...})
export class SecondTabComponent implements Tab {}
// Wrapper Component Template
<app-first-component tab></app-first-component>
<app-second-component tab></app-second-component>
// Wrapper Component
// This approach selects only 1 component
@ViewChildren(Tab, {read: FirstTabComponent}) tabs: QueryList<Tab>;
// Whereas this one selects directive
@ViewChildren(Tab,) tabs: QueryList<Tab>;
just use a template tag as your selector: 只需使用模板标签作为选择器即可:
<app-first-component #tab></app-first-component>
<app-second-component #tab></app-second-component>
and then select it like 然后像选择它
@ViewChildren('tab') tabs: QueryList<Tab>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.