Javascript 如何将html元素作为子元素传递给高阶组件(HOC)?
我想在我的高阶组件中传递一个HTML元素。现在我将子元素作为@Input装饰符传递。 我的主容器是这样的Javascript 如何将html元素作为子元素传递给高阶组件(HOC)?,javascript,angular,higher-order-components,recompose,ng-component-outlet,Javascript,Angular,Higher Order Components,Recompose,Ng Component Outlet,我想在我的高阶组件中传递一个HTML元素。现在我将子元素作为@Input装饰符传递。 我的主容器是这样的 <div> <p> MY EXTRA UI HERE</p> <ng-container *ngComponentOutlet="child"></ng-container> </div> @Component({ selector: 'app-main-container', templateUrl: '
<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
}
现在我想做的是,像这样的反应格式
<app-main-container>
<app-staff-sidebar></app-staff-sidebar>
</app-main-container>
根据您在问题中定义的结构
<app-main-container>
<app-staff-sidebar></app-staff-sidebar>
</app-main-container>
假设您希望插入更多的内容,而这些内容的呈现方式应该与简单的屈服略有不同,那么您可以使用由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表示的任何其他内容。非常感谢Philipp Meissner,您的解决方案工作得非常出色,很高兴它有所帮助!如果答案完全回答了您的问题,请随意接受:)
<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>
<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>