[解決済み] 親コンポーネントのプロパティにアクセスする

質問

トップレベルのComponentに、HTTPソースからデータを使用するプロパティがあります。 app.ts ):

import {UserData} from './services/user-data/UserData';

Component({
    selector: 'app', // <app></app>
    providers: [...FORM_PROVIDERS],
    directives: [...ROUTER_DIRECTIVES],
    pipes: [],
    template: require('./app.html')
})
@RouteConfig([
    // stuff here
])

export class App {
    // Please note that UserData is an Injectable Service I have written
    userStatus: UserStatus;

    constructor(private userData: UserData) {
        this.userStatus = new UserStatus();
    }

    ngOnInit() {
        this.userData.getUserStatus()
            .subscribe(
            (status) => {
                this.userStatus = status; // I want to access this in my Child Components...
            },
            (err) => {console.log(err);},
            () => {console.log("User status complete");            }
        );
    }
}

さて、トップレベルのComponentの直接の子である別のComponentがあり、その中で親のプロパティである''Concept''にアクセスしたいと思います。 userStatus ' にアクセスしたいのですが、以下がその子です。

Component({
    selector: 'profile',
    template: require('app/components/profile/profile.html'),
    providers: [],
    directives: [],
    pipes: []
})

export class Profile implements OnInit {
    constructor() {

    }

    ngOnInit() {
        // I want to have access with the parent App Component, 'userStatus' propety here... I only want to read this property
    }
}

Angular 1.xでは、これは簡単です。 $parent を子コントローラで参照したり、( アンチパターン警告!!! ) 私は愚かにもこのデータを $rootScope .

Angular 2で親にアクセスする最善の方法は何でしょうか？

どのように解決するのですか？

さまざまな方法があります。

• グローバルサービス

  • 参照
  • https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-service
  • Angular 2 のグローバルイベント
  • プランカー

• 親が共有し、子に注入されるサービス

  • と同様に グローバルサービス に記載されていますが providers または viewProviders の代わりに親に boostrap(...) に変更し、親の子のみが利用できるようにしました。

• 親が子にインジェクトされ、子から直接アクセスされる。

  • デメリット：タイトなカップリング

export class Profile implements OnInit {
constructor(@Host() parent: App) {
  parent.userStatus ...
}

• データバインディング

export class Profile implements OnInit {
  @Input() userStatus:UserStatus;
  ...
}

<profile [userStatus]="userStatus">