ネストしていないコンポーネント間でデータを転送する

Question

基本的には、データのコンポーネントを転送することが基本です。

私は、ログインの部分図のためのマスターページ上の1つのangular2コンポーネントを持っている -

<loginpartial></loginpartial> 

これが最初子コンポーネントでこのHTMLテンプレートによってレンダリングされる -

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

これまではこれが意味をなされることを願っています。今すぐユーザーがログインするとすぐに、私はこの部分ビューのユーザー名を親コンポーネントから取得したいと考えています。

親コンポーネント

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関数が、私は共有からAJAX呼び出しからデータを設定しているhandleResultを呼び出しています、私のログインフォームの提出であると呼ばれているこの親コンポーネントから見ることができるようにサービス。

これは子コンポーネントにLoginPartialComponentをリフレッシュさせません。私は@Input()型パラメータも試しましたが、私を助けませんでした。

更新 -

@Camaronは、私が唯一のイベントエミッタとこのログイン目的のための依存関係を作成した彼の答えに言ったように。しかし、これは機能しません。

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

} 

LoginComponent

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

これはうまくいかなかった。

Answer 1

subscribeLoginPartialComponentこのサービスを確立するためにサービスを使用してください。

@Injectable() 
export class LoginService { 

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

    constructor() { 
    } 

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

} 

そしてを注入両方のコンポーネントでこのサービス。 LoginPartialComponentにこのサービスイベントを購読してください。

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

は、その後、あなたのhandleResult機能にloginService.notifyLoginSuccessへの呼び出しを行うとitemを送信します。LoginComponentがLoginPartialComponentがあることを知っている必要はありませんので、あなたのコンポーネントの依存関係を削除することができます。このソリューションにより

。

Answer 2

私は好ましい角度狂信的なやり方は、コンポーネント（またはサービスと思われますが、私はそれがちょうどすべてのちょっとしたコンポーネントだと思いますが）で機能を作ることだと信じています。

私はこのポストはそれをよく産むと思う：

http://mean.expert/2016/05/21/angular-2-component-communication/

はまた、親のための入力と出力の特性に注意してください - >子どもとその逆通信。