角2パス変数を動的にコンポーネントに変換する

Question

親コンポーネントは、編集する製品である空のプロパティeditingProductで初期化されていますが、ユーザーが商品を選択するまで空です。

編集コンポーネントは、この

<p-dialog header="Product" 
      [(visible)]="displayCreateDialog" 
      [responsive]="true" 
      showEffect="fade" 
      [modal]="true"> 
    <qs-product-create *ngIf="displayCreateDialog" 
         [product]="editingProduct" 
         (save)="onSaved($event)"> 
    </qs-product-create> 
</p-dialog> 

ためngIfの結合ならば、これは動作しますが、それはハックのように感じている唯一の理由のように親コンポーネント（製品のリスト）内にネストされます。親コンポーネントのコンポーネントロジックからqs-product-createのproduct入力を初期化するソート方法はありませんか？または、editingProductが変更されたときに更新されるようにバインディングを設定することもできます。

Answer 1

親テンプレート内にネストしないでください。productをp-dialogからqs-product-createにもう一度渡してください。私は、次のコードをテストし、それが

app.com.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'parent-com', 
    template: ` 
     <h2><a [href]="titleUrl">{{title}}</a></h2> 
     <input [(ngModel)]="product"> 
     <p-dialog [product]="product"></p-dialog> 
` 
}) 
export class ParentCom { 

    title = "stackoverflow.com/q/39471050"; 
    titleUrl = "http://stackoverflow.com/q/39471050"; 

    product; 

    constructor() { } 

} 

P-dialog.com.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'p-dialog', 
    template: ` 
     <h2>{{title}}</h2> 
     <qs-product-create [product]="product"></qs-product-create> 
` 
}) 
export class PDialogCom { 

    title = "P Dialog"; 

    @Input() product; 

    constructor() { } 

} 

QS-を働いていますproduct-create.com.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'qs-product-create', 
    template: ` 
     <h2>{{title}}</h2> 
     <div>{{product}}</div> 
` 
}) 
export class QsProductCreateCom { 

    title = "QA Product Create"; 

    @Input() product; 

    constructor() { } 

}