39

マテリアル CDKの新しいポータルを使用して、フォームの複数の部分に動的コンテンツを挿入したいと考えています。

私は複雑なフォーム構造を持っています。目標は、サブコンポーネントがテンプレートを挿入できる (またはできない) 複数の場所を指定するフォームを持つことです。

おそらく、CDK ポータルはこれに最適なソリューションではないでしょうか?

私は何かを試しましたが、それはやり方ではないと確信しています: https://stackblitz.com/edit/angular-yuz1kg

私も試しましnew ComponentPortal(MyPortalComponent)たが、どうすれば入力を設定できますか? 通常は次のようなものですcomponentRef.component.instance.myInput

4

6 に答える 6

4

バージョンangular 9以降、「DomPortalHost」は廃止され、これは「DomPortalOutlet」に変更されました。だから今それは好きになります：

this.portalHost = new DomPortalOutlet(
   this.elementRef.nativeElement,
   this.componentFactoryResolver,
   this.appRef,
  this.injector
);

const componentRef = this.portalHost.attachComponentPortal(this.portal); componentRef.instance.myInput = data;

これとは別に、これに対する最良の解決策は、（添付された）イベントをバインドし、そこに入力を設定することだと感じました：

<ng-template [cdkPortalOutlet]="yourPortal" (attached)="setInputs($event)"> </ng-template>

ts で入力を設定します。

setInputs(portalOutletRef: CdkPortalOutletAttachedRef) {
    portalOutletRef = portalOutletRef as ComponentRef<myComponent>;
    portalOutletRef.instance.inputPropertyName = data;
}
于 2020-05-28T10:12:19.203 に答える