子コンポーネントの親コンポーネント変数にアクセスできない - 角4

Question

私はログイン後にサーバーから受け取った応答を格納する変数LoginResponseを持っています。ログインに成功すると、アプリはダッシュボードにリダイレクトされます。 私はDashboard.component.tsにAPP COMP-で

onLogin(form: NgForm) { 
    console.log(form); 
    this.serverService.Login(JSON.stringify(form.value)) 
     .subscribe(
     (response) => { 
     form.reset(); 
     this.LoginResponse = response.json().data; 
     jQuery(this.modalcloser.nativeElement).modal('hide'); 
     this.router.navigate(['/dashboard']); 
     console.log(this.LoginResponse); 
     }, 
     (error) => {console.log(error.json()), 
    jQuery(this.modalcloser.nativeElement).modal('hide'); 
    jQuery(this.errormodal.nativeElement).modal('show'); 
     this.errormsg = (error.json().error); 
    } 
    ); 
    } 

ダッシュボードCOMP-

import { Component, OnInit, Input } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './dashboard.component.html', 
    styleUrls: ['./dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit { 

    constructor(private router: Router) { } 

    @Input() LoginResponse: {token: string, teamname: string, member1name: string, member2name: string, member3name: string }; 

    ngOnInit() { 
    console.log(this.LoginResponse); 
    } 

    // logOut() { 
    // this.router.navigate(['/']); 
    // } 

} 

APPディレクトリ -

Answer 1

、IN

ログイン機能をLoginResponseにアクセスしたいです上記のイベントエミッタの実装では、親コンポーネントは

01である必要があります

<app-dashboard [LoginResponse]="LoginResponse"></app-dashboard> 

第二の方法： あなたは状態とすべての子コンポーネントが状態と親に加入し続けるサービスを使用してコンポーネント間で変数を共有することができます。

@Injectable() 
export class sharedService { 
LoginResponse:any; 
constructor() { 
} 
Initialize() { 
    this.LoginResponse = assign value here; 
} 

get() { 
    return this.LoginResponse; 
} 
} 

はその後DASHBOARD.tsあなたapp.component.htmlで

import { sharedService } from '/services/sharedService.service'; 
constructor(private sharedSer : sharedService) { 

    } 

Update(){ 
    this.LoginResponse = this.sharedSer.get(); 
} 

Answer 2

で、以下のようなダッシュボード・コンポーネントをインジェクト：

<app-dashboard [LoginResponse]="LoginResponse"></app-dashboard>