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

Question

我的 angular 有问题，这里有两个组件：

MyApp（父组件）
登录页面（子组件）

我在 MyApp 部分有一个属性 UserNow，我想通过组件 [=14] 设置属性 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) using 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 解释的那样，您可以将数据从 child 发送到 parent，我会这样做：

Parent

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

Child :

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

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

Passing Data From Child Component Into Parent Component

angular

ionic2

angular-components