0

Angular Higher Order Component で 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>
4

1 に答える 1

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 が表すその他のものです。

于 2020-06-11T11:07:26.090 に答える