他のコンポーネントが変数にアクセスできるようにするにはどうすればよいですか？

Question

Dashboard.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { AuthService } from '../auth/auth.service'; 
import { User } from '../auth/user.model' 


@Component ({ 
    selector: "app-dashboard", 
    templateUrl: "./dashboard.component.html", 
    styleUrls: ['./dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit { 
    user: User; 
    constructor (private authService: AuthService, private router: Router) {} 

    ngOnInit() { 
    this.authService.getUser() 
        .subscribe(
         (user: User) => { 
         this.user = user; 
         } 
        ) 
    } 

    onLogout() { 
    this.authService.logout(); 
    this.router.navigate(['/login']) 
    } 
} 

上記成分は、基本的には、NAV成分であり、Iは、このコンポーネントの内部に他の構成要素の多くを有します。私はこのコンポーネントの内部のコンポーネントのユーザー変数にアクセスする方法を知りましたか？

編集：私は質問を言い換える必要があります。私が上記の質問をした理由は、これのためです：

私は{{user.name}}のような親コンポーネントにユーザープロパティを表示します。しかし、私はそれを使用していないにもかかわらず、エラーを生成し、この親のための子供の部品、

"ERROR TypeError: Cannot read property 'name' of undefined"

は私が

Answer 1

完全な書き込みは、ドキュメントでこの上にありますHERE

しかし、コンポーネント通信には本当に3つの方法があります。 @Input/@Output、@ViewChild、およびサービス

@Input/@Output：

これは、特にこれがあなたをすることができますngFor

<div> 
    <childComp *ngFor="let item of items" [item]="item" (specialEvent)="doSomething()"></childComp> 
</div> 

のようなもののために、迅速に、リンクの変更のために一般的です子供に "アイテム"を渡し、子供の内部にあなたは "specialEvent"を放つことができ、親は聞きます。私は、表示上の理由から複雑ですが、ロジックを持たないため、親に送信するためのコンポーネントがあります。

2つ以上のレベルが高い場合は、この方法を使用しません。

@ViewChild：

@ViewChild()あなたが実際に子コンポーネントのパブリックメソッドを使用したり、変数を変更することができます。それは@Inputより深いですが、私が正直であればそれを使用しません。私は子供の要素が必要なときにほとんどそれを使用し、DOMオブジェクトから効果を出すか、値を取得したいと思っています。

<div id="moverWrapper" #moverWrap> 
    <div class="mover" [ngStyle]="moverStyle()"></div> 
</div> 

@ViewChild(moverWrap) moverWrap: ElementRef; 
let width = this.moverWrap.nativeElement.offsetWidth; 

Aサービス サービスは本当にあなたがが欲しいものを行うための最善の方法であるように、私は私が送られたリンクが、より良いものを持っているとして例を経る文句を言いません。しかし、あなたがグローバルに（ユーザーのように）欲しいと思っている価値は、それをサービスに入れて、必要な場所に注入することです。私は、このメソッドを95％の時間使用します。

希望に役立ちます！

Answer 2

あなたが行うことができます私は私の子コンポーネントでユーザー変数を参照する必要があることが推測されました次の方法でこのタスク：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service