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

发布时间：2020-12-17 06:57:28 所属栏目：安全来源：网络整理

导读：我的角度有问题,这里有两个组成部分： MyApp(ParentComponent) LoginPage(ChildComponent) 我在部分MyApp中有一个属性UserNow,我想通过组件LoginPage设置属性UserNow的值.怎么做？我试过了(但没有给任何影响) Import {MyApp} from '../../app/app.component

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

> 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;
        ...
    }
}

解决方法

有几种方法可以做到这一点.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!