无法在子组件中访问父组件变量 - Angular 4

Question

我有一个名为LoginResponse的变量，它存储我登录后从服务器获得的响应。我成功登录后将应用程序重定向到仪表板。 我希望在我的Dashboard.component.ts中访问LoginResponse

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

通过上面的event-emitter实现，你的父组件应该有

<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

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

    }

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

Answer 2

在你的app.component.html中，注入如下所示的仪表板组件：

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