将数据从子组件传递到父组件
Passing Data From Child Component Into Parent Component
我的 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;
...
}
}
有几种方法可以做到。
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
});
就像@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)
}
}
我的 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;
...
}
}
有几种方法可以做到。
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
});
就像@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)
}
}