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

Question

我想按照模板中指定的顺序从视图(或内容)获取一些指令。

企图1 [柱塞]

@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);
  }
}

通过简单地使用不同的指令，我就失去了它们的order。

企图2 [柱塞]

@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));
  }
}

柱塞实例