Как передать элемент html как дочерний элемент в компонентах углового более высокого порядка (HOC)?

Question

Я хочу передать элемент HTML в свой компонент Angular более высокого порядка. Прямо сейчас я передаю дочерний элемент как декоратор @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.