Question

我是Angular 2的新手，所以请宽容。

我想在子组件中使用函数（在父组件中声明）。我正在使用@output。这个函数应该返回一些字符串，而child需要将这个字符串发送给api。

所以我有一些父功能：

public ToJsonDate = (value: string) =>{

    try {
        let parts = value.split('-').map(Number);
        parts[1] -= 1;
        let date = new Date(Date.UTC.apply(null, parts));
        let textContent = '/Date(' + date.getTime() + '' + this.invoiceDataParent['temp'].Zone + ')/';
        console.log('test1', textContent);
        return textContent;
    } catch(error){
        console.log(error);
    }

}

在HTML中我得到了：

div class="column2"><invoice [invoiceDataREST]='invoiceDataParent' (jsonDate)="ToJsonDate($event)"></invoice></div>

在子组件上我正在使用输出机制：

@Output() jsonDate: EventEmitter<string> = new EventEmitter<string>();

我想要做的是在另一个孩子中执行此功能：

private sendInvoiceRequest() {
    this.isEdit = false;

    this.invoiceDataREST['ResponseDetails'].DocumentDate = this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);
 console.log('test2',this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);}

现在：控制台中的test1显示良好的输出 - 所以这个函数肯定会执行，但是控制台中的测试2显示'undefined'

有人可以解释一下我做错了什么吗？我错过了什么吗？

Answer 1

Output属性不是双向的。他们发送数据，期间。没有通过输出事件发射器接收输入。你要做的是创建一个Input属性，父函数将更新的值分配给 in 到子组件。例如：

<div class="column2"><invoice [invoiceDataREST]='invoiceDataParent' (jsonDate)="ToJsonDate($event)"></invoice></div>

export class Parent{



    public ToJsonDate = (value: string) =>{

        try {
            let parts = value.split('-').map(Number);
            parts[1] -= 1;
            let date = new Date(Date.UTC.apply(null, parts));
            let textContent = '/Date(' + date.getTime() + '' + this.invoiceDataParent['temp'].Zone + ')/';
            console.log('test1', textContent);

            //assign new value to property that goes back into child component
            this.invoiceDataParent['ResponseDetails'].DocumentDate = textContent;
        } catch(error){
            console.log(error);
        }

    }

}



export class Child{
   @Input() invoiceDataREST: any;
   @Output() jsonDate: EventEmitter<string> = new EventEmitter<string>();

   private sendInvoiceRequest() {
    this.isEdit = false;

    this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);
   }

}

我尝试更新您的代码以显示它应该如何工作。 emit不会从父级检索值。它只是将值 out 发送给父级。然后，父级将值分配给正在将发送到子级的对象上的正确属性。

希望这有帮助。

父函数在子组件中返回undefined - angular2

1 个答案: