传递数据从子组件放入父组件

Question

我有我的角度的问题，在这里我有两个组成部分：

• MyApp的（为父级）
• LoginPage（ChildComponent）

我有一个属性UserNow在部分MyApp，我想通过组件LoginPage设置属性UserNow的值。怎么做？

我已经试过（但没有给出任何影响）

Import {MyApp} from '../../app/app.component'; 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 
    public app: any; 

    login() { 
     ... 
     this.app = MyApp; 
     this.app.userNow = MyValue; 
     ... 
    } 
} 

Answer 1

有几种方法可以做到这一点。

1）使用服务：服务通常在应用程序中有单个实例，可用于轻松地在组件之间共享数据。 例如创建一个服务userService并将其注入到任何想要使用它的组件中。

2）使用Emit：Emit用于在应用程序中发出事件并且可以采取相应的行动。

this.eventInChild.emit(data); 

可以对事件发射采取两种行动。

• 呼叫父的函数：

<child-component (eventInChild)="parentFunction($event)"></child-component>

• 从服务发射和订阅事件（可在服务被订阅以及成分）：

服务内容如下：

getEmitStatus() { 
    return this.eventInService; 
} 

//In component or service - to listen to event 

this.subscription = this.userService.getEmitStatus() 
    .subscribe(item => { 
     //thing to do here 
}); 

Answer 2

像@SaUrAbHMaUrYa解释，你可以从孩子发出的数据父母，我会做这样的事情：

家长

<page-login (on_user_has_logged_in)="userNow = $event"></page-login> 

儿童：

import {Output}  from '@angular/core' 
import {EventEmitter} from '@angular/core' 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 
    @Output() on_user_has_logged_in : EventEmitter<any> = new EventEmitter() 

    login(MyValue) { 
     this.on_user_has_logged_in.emit(MyValue) 
    } 
}