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>

假设您要插入更多的内容，而这些内容的呈现方式将与仅通过普通屈服产生的显示方式有所不同，则可以使用slots关键字表示的select。基本上是在寻找提供的模式。

这样调用结构：

<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表示的其他任何内容。

如何在Angular高阶组件（HOC）中将html元素作为子元素传递？

1 个答案: