扩展类的Angular ContentChildren

Posted 2023-02-23

【中文标题】扩展类的Angular ContentChildren

【英文标题】：Angular ContentChildren of extended class

【发布时间】：2017-10-11 03:14:39

【问题描述】：

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

当我尝试使用 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'

【问题讨论】：

Class inheritance support的可能重复

所以我删除它？不确定它是否真的是重复的，但也不确定问的是什么！

嗯，我不确定。将帖子标记为可能重复会自动添加评论。重复的帖子通常在顶部有一个链接到另一个解决方案的通知，例如：***.com/questions/55684960/…。

NP，我会在某个时候审查两者，然后如果我认为它是重复的，则将其批准为重复。感谢您的解释。

【参考方案1】：

我解决了这个问题：

进入我的 Child1 组件装饰器

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

进入我的 Child2 组件装饰器

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

您现在可以从 angular 中查看新的 io 示例：

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