扩展类的Angular ContentChildren

时间:2017-05-11 23:04:07

标签: angular

我有3个组件。 1个父组件,可以包含ng-content中任意2个子组件之一。我的子组件具有共享功能,因此它们扩展了具有共享功能的抽象类。

当我尝试使用ContentChildren获取ng-content引用时,如果我使用其中一个子类,它可以正常工作。当我引用抽象类时,它不起作用。有没有办法让这项工作? plkr是:http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa?p=preview

这是我的代码:

儿童抽象类:

    abstract export class Child{
      value: any;
      abstract setValue();
    }    

我的父代码:

@Component({
  selector: 'parent',
  template: `
    <div>
      parent
      <ng-content></ng-content>
    </div>
  `,
})
export class Parent {
  @ContentChild(Child) 
  child: Child;
  name:string;
  constructor() {

  }
   ngAfterViewInit() {
     this.child.setValue();
   }
}

第一个孩子:

@Component({
  selector: 'child1',
  template: `
    <div>
       value is: {{value}}
    </div>
  `,
})
export class Child1 extends Child {
  name:string;
  constructor() {

  }
   setValue() {this.value = 'Value from child 1'}
}

第二个孩子:

@Component({
  selector: 'child2',
  template: `
    <div>
      value is: {{value}}
    </div>
  `,
})
export class Child2  extends Child {
  name:string;
  constructor() {

  }
  setValue() {this.value = 'Value from child 2'}
}

1 个答案:

答案 0 :(得分:16)

我通过使用:

解决了这个问题

进入Child1的Component装饰器

providers: [{provide: Child, useExisting: forwardRef(() => Child1)}],

进入Child2的Component装饰器

providers: [{provide: Child, useExisting: forwardRef(() => Child2)}],

现在,您可以从angular:

查看新的io示例

https://angular.io/guide/dynamic-component-loader