在非嵌套组件之间传输数据 [英] Transferring data between non-nested components

问题描述

基本上，我想要的是传输数据黑白组件.

Basically , What I desire is to transfer data b/w components.

我在母版页上有一个 angular2 组件，用于登录的部分视图 -

I have one angular2 component on master page for partial view of login -

<loginpartial></loginpartial>

这最初是通过这个带有子组件-

This is initially rendered through this html template with child component-

<ul [hidden]="!item.isAuthenticated">
    <li><a href="javascript:;">Hello! {{item.userName}}</a></li>
    <li><a href="javascript:;">LogOff</a></li>
</ul>
<ul [hidden]="item.isAuthenticated">
    <li><a href="javascript:;">Hello! User</a></li>
    <li><a href="javascript:;">Log In</a></li>
</ul>

子组件 -

@Component({
    selector: 'loginpartial',
    templateUrl: '../Templates/LoginPartial.html'
})

export class LoginPartialComponent implements OnInit {
    public item: any = { isAuthenticated: false, userName: ' ' }
    constructor() {
        this.item.isAuthenticated = false;
    }

    ngOnInit() {
        this.item.isAuthenticated = false;
    }
}

我希望到目前为止这一切都是有意义的.现在我需要的是一旦用户登录，我想在从父组件传输的这个部分视图中获取用户名.

I hope this makes sense till now. Now What my need is as soon as user is logged in , I want to get username in this partial view transferred from parent component.

父组件

import { Component, ChangeDetectionStrategy, OnInit} from '@angular/core';
import {LoginPartialComponent} from '../loginpartialview/loginpartial.component.ts';
import {SharedService} from '../sharedService/app.sharedService.ts';

@Component({
    selector: 'loginmodel',
    templateUrl: '../Templates/Login.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [LoginPartialComponent,SharedService]
})
export class LoginComponent implements OnInit {
    item: any = {
        isAuthenticated: false, userName: ' '
    };
    constructor(private sharedService: SharedService,
        private loginComp: LoginPartialComponent) {
    }

    onSubmit(item: any): void {
        if (this.myForm.valid) {
            var userObject = {
                email: item.email,
                password: item.password
            };
            this.sharedService.getLogin(userObject).map(response => response.json())
                .subscribe(
                data => this.handleResult(data),
                error => console.log(error)
                );
        }
    }

    private handleResult(data) {
        if (data.success) {
            this.item.isAuthenticated = true;
            this.item.userName = data.userName;
            this.item = this.loginComp.item;
        }
        else {

        }
    }
}

正如您从这个 父组件 中看到的，当 onSubmit 函数被调用时，这是我的登录表单提交，我正在调用正在设置的 handleResult来自共享服务的ajax调用的数据.

As you can see from this parent component when onSubmit function is called which is my login form submission I am calling handleResult that is setting data from ajax call from the shared service.

这不会让子组件 - LoginPartialComponent 刷新.我也尝试过 @Input() 类型参数，但没有帮助我.

This is not letting the child component - LoginPartialComponent refresh. I tried with @Input() type parameters too but didn't help me.

更新 -

正如@Camaron 在他的回答中所说，我仅使用事件发射器为此登录目的创建了一个依赖项.但这不起作用.

As @Camaron said in his answer I created a dependency for this login purpose only with event emitters. But this doesn't work.

LoginPartialComponent

import { Component, OnInit} from '@angular/core';
import {LoginPartialModel} from '../loginpartialview/loginpartial.model.ts';
import {SharedService} from '../sharedService/app.sharedService.ts';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Component({
    selector: 'loginpartial',
    templateUrl: '../Templates/LoginPartial.html',
    providers: [SharedService]
})

export class LoginPartialComponent {
    item: LoginPartialModel = new LoginPartialModel();
    constructor(private service: SharedService) {
        this.service.onLoginSuccess.subscribe((loginData: any) => this.item == loginData.item);
    }

}

登录组件

import { Component, OnInit} from '@angular/core';
import {SharedService} from '../sharedService/app.sharedService.ts';

@Component({
    selector: 'loginmodel',
    templateUrl: '../Templates/Login.html',
    providers: [SharedService]
})
export class LoginComponent {

    constructor(private sharedService: SharedService) {
    }

    onSubmit(item: any): void {
            var userObject = {
                email: item.email,
                password: item.password
            };
            this.sharedService.getLogin(userObject).map(response => response.json())
                .subscribe(
                data => this.handleResult(data),
                error => console.log(error)
                );
    }
    private handleResult(data) {
        if (data.success) {
            this.close();
            this.sharedService.onLoginSuccess.emit(data);
        }
        else {

        }
    }
}

共享服务(依赖)

import { Component, Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class SharedService {

    onLoginSuccess: EventEmitter<any> = new EventEmitter<any>();
    constructor() {
    }

    notifyLoginSuccess(item: any): void {
        this.onLoginSuccess.emit({ item: item });
    }
}

这没用.

推荐答案

尝试使用一个服务来建立这个通信subscribe LoginPartialComponent.

Try to use a service to establish this communication subscribe the LoginPartialComponent.

@Injectable()
export class LoginService {

    onLoginSuccess: EventEmitter<any>() = new EventEmitter<any>();

    constructor() {
    }

    notifyLoginSuccess(item:any):void {
        this.onLoginSuccess.emit({item: item});
    }

}

然后在两个组件上注入此服务.在您的 LoginPartialComponent 中订阅此服务事件.

And then Inject this service on both components. In your LoginPartialComponent subscribe to this service event.

constructor(public loginService:LoginService) {
    this.loginService.onLoginSuccess.subscribe((loginData: any) => this.item = loginData.item);
}

然后在您的 handleResult 函数中调用 loginService.notifyLoginSuccess 并发送 item.

Then in your handleResult function make a call to loginService.notifyLoginSuccess and send the item.

使用此解决方案，您可以删除组件的依赖项，因此 LoginComponent 无需知道存在 LoginPartialComponent.

With this solution you can remove the dependency of your components so the LoginComponent don't need to know that there is a LoginPartialComponent.

这篇关于在非嵌套组件之间传输数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！