按顺序获取不同指令的数组

Question

我想从视图（或内容）中按照它们在模板中指定的顺序获取一些指令。

尝试1 [plunker]

@Directive({selector: 'dir-1'}) class Dir1 {} 
@Directive({selector: 'dir-2'}) class Dir2 {} 
@Directive({selector: 'dir-3'}) class Dir3 {} 

@Component({ 
    selector: 'my-app', 
    template: ` 
<dir-1></dir-1> 
<dir-2></dir-2> 
<dir-3></dir-3> 
    `, 
}) 
export class App { 
    @ViewChildren(Dir1) dir1s; 
    @ViewChildren(Dir2) dir2s; 
    @ViewChildren(Dir3) dir3s; 
    ngAfterViewInit() { 
    console.log(this.dir1s, this.dir2s, this.dir3s); 
    } 
} 

通过简单地使用不同的指令，我失去它们的顺序。

尝试2 [plunker]

@Directive({selector: 'general'}) class General {} 
@Directive({selector: '[specific-1]'}) class Specific1 {} 
@Directive({selector: '[specific-2]'}) class Specific2 {} 
@Directive({selector: '[specific-3]'}) class Specific3 {} 

@Component({ 
    selector: 'my-app', 
    template: ` 
<general specific-1></general> 
<general specific-2></general> 
<general specific-3></general> 
    `, 
}) 
export class App { 
    @ViewChildren(General) generals; 
    ngAfterViewInit() { 
    console.log(this.generals); 
    } 
} 

通过具有 “一般” 选择器，我不再知道该指令的类型。

Answer 1

作为文档所述https://angular.io/docs/ts/latest/cookbook/dependency-injection.html#!#find-a-parent-component-by-injection

获取部件引用是在角有点棘手。

所以，你可以试试下面的诀窍：

export abstract class BaseSpecific { } 

const provideSpecific = (component: BaseSpecific) => { 
    return { provide: BaseSpecific, useExisting: forwardRef(() => component) }; 
}; 

@Directive({ selector: '[specific-1]', providers: [provideSpecific(Specific1)] }) export class Specific1 implements BaseSpecific { } 
@Directive({ selector: '[specific-2]', providers: [provideSpecific(Specific2)] }) export class Specific2 implements BaseSpecific { } 
@Directive({ selector: '[specific-3]', providers: [provideSpecific(Specific3)] }) export class Specific3 implements BaseSpecific { } 

@Directive({ selector: 'general' }) 
export class General { 
    constructor(@Self() public specificClass: BaseSpecific) { } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <general specific-1></general> 
    <general specific-2></general> 
    <general specific-3></general> 
    ` 
}) 
export class AppComponent { 
    @ViewChildren(General) generals: QueryList<General>; 

    ngAfterViewInit() { 
    console.log(this.generals.map(x => x.specificClass.constructor.name)); 
    } 
} 

Plunker Example