typescript 从孩子到父母的角度传递数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41200551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular pass data from child to parent
提问by nikagar4
I'm learning/working on Angular project, I've done a lot and I try to do the things "right way", so now what i want to do is this:
我正在学习/从事 Angular 项目，我做了很多工作，我尝试以“正确的方式”做事，所以现在我想做的是：
I want to get the variable (output) from child component to parent component, but I don't want to use output, I don't want to listen to it, I want to get it whenever parent needs it, something like child.getVariable()I've came across one post which said I should use childview but the question wasn't same as mine, so I want to know is it a good practice to use childview to get data from child component or not?
我想从子组件到父组件获取变量（输出），但我不想使用输出，我不想听它，我想在父需要时获取它，就像child.getVariable()我'我看到一个帖子说我应该使用 childview 但问题与我的不一样，所以我想知道使用 childview 从子组件获取数据是否是一个好习惯？
回答by Amit
Register the EventEmitter in your child component as the @Output:
在您的子组件中将 EventEmitter 注册为 @Output：
@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Emit value on click:
public pickDate(date: any): void {
this.onDatePicked.emit(date);
}
Listen for the events in your parent component's template:
侦听父组件模板中的事件：
<div>
<calendar (onDatePicked)="doSomething($event)"></calendar>
</div>
and in the parent component:
并在父组件中：
public doSomething(date: any):void {
console.log('Picked date: ', date);
}
回答by Mete Cantimur
If you want to access a child component synchronously then it might be a good practice to use ViewChild as follows:
如果您想同步访问子组件，那么使用 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;
}
}
回答by Randhish kumar
Ways how Parents can communicate with Child components in Angular.
父组件如何与 Angular 中的子组件通信的方式。
(i) The child component exposes an EventEmitterproperty with which it emits events when something happens. The parent binds to that event property and reacts to those events.
(i) 子组件公开一个EventEmitter属性，当发生某些事情时，它会使用该属性发出事件。父级绑定到该事件属性并对这些事件做出反应。
(ii) A parent component cannot use data binding to read child properties or invoke child methods. You can do both by creating a template reference variable for the child element and then reference that variable within the parent template
(ii) 父组件不能使用数据绑定来读取子属性或调用子方法。您可以通过为子元素创建模板引用变量，然后在父模板中引用该变量来实现
(iii) The local variable approach is simple and easy. But it is limited because the parent-child wiring must be done entirely within the parent template. The parent component itself has no access to the child.
(iii) 局部变量方法简单易行。但它是有限的，因为父子连接必须完全在父模板内完成。父组件本身无法访问子组件。
(iv) Parent and Children can communicate via service.
(iv) 家长和孩子可以通过服务进行交流。
For detailed explanation you can refer to below link :
有关详细说明，您可以参考以下链接：
回答by jezzah
Do you only need access to the child component's variable from within the parent's template? If so, you can use:
您是否只需要从父模板中访问子组件的变量？如果是这样，您可以使用：
<child-component #childComponentRef></child-component>
You then have access to #childComponentRef.someVariable from within your parent template. Otherwise I think the Angular team recommends shared services. They are a bit more versatile anyways. See https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-and-children-communicate-via-a-service
然后，您可以从父模板中访问 #childComponentRef.someVariable。否则我认为 Angular 团队推荐共享服务。无论如何，它们的用途更多一些。请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-and-children-communicate-via-a-service
