我有以下嵌套组件的结构.
<app-root>
<app-comp-1>
<app-comp-2>
</app-comp-2>
</app-comp-1>
<app-root>
我想将任何内容转换为最后一个孩子(app-comp-2).所以,我需要这样的东西.
<app-comp-1>
<app-comp-2>
<ng-content></ng-content>
</app-comp-2>
</app-comp-1>
但是在app-root组件中只有app-comp-1组件可用.所以,这是我必须转录我的内容的地方.
<app-root>
<app-comp-1>
<content-I-want-to-transclude></content-I-want-to-transclude>
</app-comp-1>
</app-root>
---------------------------
<app-comp-1>
<ng-content></ng-content>
<app-comp-2>
...
</app-comp-2>
</app-comp-1>
解决方法
我有一个类似的问题,我有一个卡组件,它有一个子卡头组件以及卡体的选择器.
卡片头部件有一个切换按钮,用于调度卡片打开/关闭的动作.
然后,我需要能够通过卡组件将额外的按钮从父组件传递到卡片头组件中
首先,我创建了一个通用的card-header组件,允许我使用一段代码来处理切换卡内容,方法是将操作分派给NgRx商店,该商店包含一系列隐藏的卡片(使用提供的名称输入属性).
卡片头组件订阅商店,并在切换状态改变时向父组件发出事件
@Component({
selector: 'po-card-header',template: `
<div class="card-header">
<span class="text-uppercase">{{ header }}</span>
<div class="header-controls">
<ng-content select=[card-header-option]></ng-content>
<ng-content select=[header-option]></ng-content>
<span class="header-action" (click)="onTogglePanel()">
<i class="fa" [ngClass]="{ 'fa-caret-up': !collapsed,'fa-caret-down': collapsed}"></i>
</span>
</div>
</div>
`
})
export class CardHeaderComponent implements OnInit,OnDestroy {
...
@Input() name: string;
@Output() togglePanel = new EventEmitter<boolean>();
collapsed$: Observable<boolean>;
collapsedSub: Subscription;
constructor(private store: Store<State>) {
this.collapsed$= this.store.select(state => getPanelCollapsed(state,this.name);
}
ngOnInit(): void {
this.collapsedSub = this.collapsed$.subscribe(collapsed => {
this.collapsed = collapsed;
this.togglePanel.emit(collapsed);
});
}
.... unsubscribe on destroy.
}
请注意,标头有2 ng-content部分.
标题选项选择器用于我明确使用此组件时要添加的任何其他图标,例如
<div class="card">
<po-card-header>
...
<span header-option class="fa fa-whatever" (click)="doSomething()"></span>
</po-card-header>
...
</div>
第二个card-header-option选择器用于根组件,它使用卡组件,而不是卡头组件,但仍希望将额外的图标传递到标头中.
@Component({
selector: 'po-card',template: `
<div class="card">
<po-card-header>
...
<ng-content select="[card-header-option] header-option></ng-content>
</po-card-header>
<div class="card-block">
<ng-content select="[card-body]"></ng-content>
</div>
</div>
`
})
...
[card-header-option]选择器将选择具有该属性的任何元素,然后使用header-option属性将它们传递给card-header组件
我卡片组件的最终用法如下所示.
<div>
Some component that uses the card
<po-card
header="Some text to go in the card header"
name="a-unique-name-for-the-card">
<span card-header-option class='fa fa-blah header-action'></span>
<div card-body>
Some content that gets put inside the [card-body] selector on the card component.
</div>
</po-card>
</div>
最后的结果是我可以使用我的自定义卡组件,并获得卡头组件提供的切换功能的好处,但也提供我自己的自定义操作,这也将在标题中呈现
希望你觉得这很有帮助:-)
