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 s 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-产品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() { }

}

Angular 2动态地将变量传递给组件

1 个答案: