Der Zugriff auf die übergeordnete Komponente ist nicht möglich. Untergeordnete Komponente - Angular 4

Question

Ich habe eine Variable namens LoginResponse, die die Antwort speichert, die ich vom Server nach der Anmeldung erhalte. Ich leite die App bei erfolgreicher Anmeldung in das Dashboard um. Ich wünsche Login für den Zugriff auf in meinem Dashboard.component.ts

LOGIN FUNKTION IN 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); 
    } 
    ); 
    } 

DASHBOARD 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 DIRECTORY-

Answer 1

Mit die obige Implementierung von Event-Emitter, sollte Ihre Mutterkomponente

01 haben

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

2. Art und Weise: Sie können mit einem Service-Variablen über Komponenten teilen, dass der Staat und alle untergeordneten Komponente abonnieren Sie den Zustand und Eltern hält.

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

get() { 
    return this.LoginResponse; 
} 
} 

Dann in DASHBOARD.ts

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

    } 

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

Answer 2

In Ihrem app.component.html, Dashboard-Komponente wie unten injizieren:

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