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

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

尝试1[]

@指令（{selector:'dir-1'}）类Dir1{}
@指令（{selector:'dir-2'}）类Dir2{}
@指令（{selector:'dir-3'}）类Dir3{}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
@ViewChildren（Dir1）Dir1；
@ViewChildren（Dir2）dir2s；
@ViewChildren（Dir3）Dir3；
ngAfterViewInit（）{
console.log（this.dir1s、this.dir2s、this.dir3s）；
}
}

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

尝试2[]

@指令（{selector:'general'}）类general{}
@指令（{selector:'[specific-1]}）类Specific1{}
@指令（{selector:'[specific-2]}）类Specific2{}
@指令（{selector:'[specific-3]}）类Specific3{}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
@儿童（将军）将军；
ngAfterViewInit（）{
console.log（this.generals）；
}
}

通过使用“通用”选择器，我不再知道指令的类型，如文档所述

获取组件引用在角度上有点棘手

因此，您可以尝试以下技巧：

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

导出抽象类BaseSpecific{}
const provideSpecific=（组件：BaseSpecific）=>{
返回{provide:BaseSpecific，useExisting:forwardRef（（）=>component）}；
};
@指令（{selector:'[specific-1]'，providers:[providesspecific（Specific1）]}）导出类Specific1实现BaseSpecific{}
@指令（{selector:'[specific-2]'，providers:[providesspecific（Specific2）]}）导出类Specific2实现BaseSpecific{}
@指令（{selector:'[specific-3]'，providers:[providesspecific（specific 3）]}）导出类specific 3实现BaseSpecific{}
@指令（{selector:'general'}）
出口类一般{
构造函数（@Self（）public specific类：BaseSpecific）{}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
@查看儿童（一般）将军：QueryList；
ngAfterViewInit（）{
log（this.generals.map（x=>x.specificClass.constructor.name））；
}
}

---

是否要获取

Specific1、Specific2、Specific3

？是的，我希望生成的数组以正确的顺序包含特定类型的对象。

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

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