傳遞數據從子組件放入父組件

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