访问父组件中的属性 [英] Accessing a property in a parent Component

问题描述

我在顶级组件中有一个属性，该属性使用了来自HTTP源的数据，就像这样(这在名为app.ts的文件中):

I have a property in a top level Component that is used data from a HTTP source like so (this is in a file called 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");            }
        );
    }
}

现在，我有另一个组件，它是顶级组件的直接子代，并且我想在其中访问父代的属性'userStatus'，这里是子代:

Now, I have another Component that is a direct child of the top level Component and within it I would like to access the parent's property 'userStatus', here is the child:

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或( ANTI PATTERN ALERT !!! )，我可能很愚蠢地将此数据放入我的$rootScope.

Now in Angular 1.x this would be easy as I could reference $parent in my child controller or (ANTI PATTERN ALERT!!!) I could be so foolish to put this data in my $rootScope.

在Angular 2中访问父级的最佳方法是什么?

What would be the best way to access the parent in Angular 2?

推荐答案

有不同的方法:

• 全局服务

• global service

• 另请参见
• https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-服务
• Angular 2中的全局事件
• 柱塞

• see also
• https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-service
• Global Events in Angular 2
• Plunker

服务

• 类似于全局服务，但在父级的providers或viewProviders中而不是boostrap(...)中列出，并且仅对父级的子级可用.

• similar to global service but listed in providers or viewProviders in the parent instead of boostrap(...) and only available to children of parent.

父母被注入孩子并被孩子直接访问

parent injected to the child and accessed directly by the child

• 缺点:紧密耦合

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

• 数据绑定

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

<profile [userStatus]="userStatus">

这篇关于访问父组件中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！