将数据从子组件传递到父组件

Question

我的角度有问题,这里有两个组成部分:

• MyApp(ParentComponent)
• LoginPage(ChildComponent)

我有UserNow部分属性,MyApp我想UserNow通过组件设置属性的值LoginPage.怎么做？

我试过了(但没有给任何影响)

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)
    }
}