Question

我正在学习/工作Angular项目，我已经做了很多事情，我尝试做正确的事情＆＃34;正确的方式＆＃34;，所以现在我想要做的是：

我想从子组件到父组件得到变量（输出），但我不想使用输出，我不想听它，我想在父母时得到它需要它，像child.getVariable()这样我曾经发过一篇帖子说我应该使用童视但这个问题与我的不一样，所以我想知道使用childview是一个好习惯从子组件获取数据？

Answer 1

在子组件中注册EventEmitter作为@Output：

@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Emit value on click:

public pickDate(date: any): void {
    this.onDatePicked.emit(date);
}

收听父组件模板中的事件：

<div>
    <calendar (onDatePicked)="doSomething($event)"></calendar>
</div>

并在父组件中：

public doSomething(date: any):void {
    console.log('Picked date: ', date);
}

Answer 2

如果要同步访问子组件，最好使用ViewChild，如下所示：

import { CountryCodesComponent } from '../../components/country-codes/country-codes.component';
import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'signup',
    templateUrl: "signup.html"
})
export class SignupPage {
    @ViewChild(CountryCodesComponent)
    countryCodes: CountryCodesComponent;
    nationalPhoneNumber = '';

    constructor() {}

    get phoneNumber(): string {
        return '+' + this.countryCodes.countryCode + this.nationalPhoneNumber;
    }
}

Answer 3

您是否只需要从父模板中访问子组件的变量？如果是这样，您可以使用：

<child-component #childComponentRef></child-component>

然后，您可以从父模板中访问＃childComponentRef.someVariable。否则我认为Angular团队建议共享服务。无论如何，它们的功能更多一些。见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-and-children-communicate-via-a-service

Answer 4

父母如何在Angular中与子组件进行通信。

（i）子组件公开一个 EventEmitter 属性，当发生某些事件时，该子组件将使用该属性发出事件。父级绑定到该事件属性并对这些事件做出反应。

（ii）父组件不能使用数据绑定来读取子属性或调用子方法。您可以通过为子元素创建模板引用变量，然后在父模板中引用该变量来完成这两项操作

（iii）局部变量方法既简单又容易。但这是有限的，因为必须在父模板中完全完成父子连接。父组件本身无法访问子组件。

（iv）父母和子女可以通过服务进行沟通。

有关详细说明，您可以参考以下链接：

Angular Official website- Components communication

从子到父的角度传递数据

4 个答案: