將數據從子組件傳遞到父組件

Question

我的角度有問題，這里有兩個組成部分：

• MyApp（ParentComponent）
• LoginPage（ChildComponent）

我在部分MyApp有一個屬性UserNow ，我想通過組件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)
    }
}