[英]ContentChild by extended abstract class
我有两个不同的组件,它们扩展了一个共同的组件。
AComponent extends BaseComponent {}
BComponent extends BaseComponent {}
第三个组件具有ng-content。
<wrapper>
<a-component></a-component>
<b-component></b-component>
</wrapper>
不幸的是,在以下情况下这些组件不可见。
WrapperComponent {
@ContentChildren(BaseComponent) components;
}
我不想使用特定类型(Acomponent,BComponnet)创建ContentChild。
您可以使用别名类提供程序作为解决方法。
定义您的组件,如下所示;
@Component({
selector: 'a-component',
templateUrl: './a.component.html',
styleUrls: ['./a.component.css'],
providers: [{ provide: BaseComponent, useExisting: AComponent }]
})
export class AComponent extends BaseComponent implements OnInit {
constructor() {
super();
console.log("a created.");
}
ngOnInit() {}
}
和
@Component({
selector: 'b-component',
templateUrl: './b.component.html',
styleUrls: ['./b.component.css'],
providers: [{ provide: BaseComponent, useExisting: BComponent }]
})
export class BComponent extends BaseComponent implements OnInit {
constructor() {
super();
console.log("b created.");
}
ngOnInit() {}
}
BaseComponent
在哪里
export abstract class BaseComponent {}
在WrapperComponent
使用它,如下所示
@Component({
selector: 'wrapper',
templateUrl: './wrapper.component.html',
styleUrls: ['./wrapper.component.css']
})
export class WrapperComponent implements OnInit, AfterContentInit {
@ContentChildren(BaseComponent) components;
constructor() { }
ngOnInit() { }
ngAfterContentInit() {
console.log("components: ", this.components.length);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.