如何在角度高阶组件 (HOC) 中将 html 元素作为子元素传递?

Question

我想在我的 Angular 高阶组件中传递一个 HTML 元素。现在我正在传递子元素作为@Input装饰器。 我的HOC，主容器是这样的。

<div>
<p> MY EXTRA UI HERE</p>
<ng-container *ngComponentOutlet="child"></ng-container>
</div>
@Component({
selector: 'app-main-container',
templateUrl: './main-container.component.html',
styleUrls: ['./main-container.component.scss'],
})
export class MainContainerComponent {
@Input() child
}

在其他组件中，我像这样使用我的 HOC

我当前的代码：

<app-main-container [child]="child"></app-main-container>

在 .ts 文件中，我正在像这样传递我的子组件

import { SidebarComponent } from '../sidebar/sidebar.component'
@Component({
selector: 'app-staff',
templateUrl: './staff.component.html',
styleUrls: ['./staff.component.scss'],
})
export class StaffComponent {
child: any = SidebarComponent
}

现在我想做的是，像这样的东西在 React 格式

<app-main-container> 
<app-staff-sidebar></app-staff-sidebar>
</app-main-container>

Answer 1

鉴于您在问题中定义的结构

<app-main-container> 
<app-staff-sidebar></app-staff-sidebar>
</app-main-container>

我们可以通过以下方式实现这一目标ng-content.

您的main-container.component.html应该这样接受它：

<div class="main-container">
<ng-content></ng-content> <!-- This will be exchanged with the `<app-staff-sidebar></app-staff-sidebar>` that you passed in.
</div>

假设您要插入更多内容，这些内容的呈现方式应该与普通生成略有不同，则可以使用select关键字表示的slots。它基本上是试图找到提供的模式。

像这样调用结构：

<app-main-container>
<app-staff-sidebar data-slot-type="right"></app-staff-sidebar>
<div data-slot-type="left"></div>
</app-main-container>

并接受这样的插槽：

<div class="main-container">
<ng-content select="[data-slot-type=left]"></ng-content>
<ng-content select="[data-slot-type=right]"></ng-content>
</div>

select可以匹配任何给定的模式。它可以是一个CSS类，一个完整的标签或DOM表示的任何其他东西。