我想在父组件的模板中有条件地显示子组件(包括其ContentChildren)。有条件地在父组件中显示子组件及其内容
app.component.html
<parent>
<child #initial>
<span>Player</span>
</child>
<child label="Intro">
<span>Intro</span>
</child>
<child label="Content">
<span>Content</span>
</child>
</tabs>
期望结果
<parent>
<child>
<span>Player</span>
</child>
</parent>
parent.component.ts
@Component({
selector: 'parent',
template: `<!--Display {{current}} and its ContentChildren-->`,
styleUrls: ['./tabs.component.scss']
})
export class ParentComponent implements OnInit {
@ContentChildren(ChildComponent) childs;
@ContentChild("initial") initial;
@ContentChild("open") current;
ngOnInit(): void {
if (this.initial) this.current = this.initial;
}
}
个child.component.ts
@Component({
selector: 'child',
template: `<ng-content></ng-content>`,
})
export class ChildComponent {
@Input() label: string;
}
尝试为parent.component.html
<ng-container *ngFor="let child in childs">
<child *ngIf="child == current"></child> //ContentChildren as defined in 'app.component.html' are lost now
</ng-container>
@Vega是的,没错 –
,你不希望使用ngif或ngswitch ..? – Vega
@Vega它有效巫婆ngIf,但子组件的丢失 –