使用TypeScript在Angular2中访问父组件中的属性

我目前正在尝试自学Angular2和TypeScript，并且在过去的4年中与Angular 1.一起工作。 无论如何，我有一个顶级组件的属性，它是来自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");            }
        );
    }
}

现在我有另一个组件，它是顶级组件的直接子组件，在其中我想访问父级的属性' 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
    }
}

现在在Angular1.x中，这很容易，因为我可以在我的子控制器中引用$parent或（ ANTI PATTERN ALERT !!! ）我可能非常愚蠢的将这些数据放在我的$rootScope 。 在Angular2中访问父项的最佳方式是什么？ 提前致谢。

有不同的方法：

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

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

<profile [userStatus]="userStatus">

你可以：

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

  (...)
}

<profile [userStatus]="userStatus"></profile>

@Component({
  (...)
})
export class Profile implements OnInit {
  constructor(app:App) {
    this.userStatus = app.userStatus;
  }

  (...)
}

我有同样的问题，但我解决它的方式不同。 我不知道这是否是一种很好的方法，但它对我所需要的很好。

我在子组件的构造函数上使用了@Inject，如下所示：

import { Component, OnInit, Inject } from '@angular/core';
import { ParentComponent } from '../views/parent/parent.component';

export class ChildComponent{
    constructor(@Inject(ParentComponent) private parent: ParentComponent){

    }

    someMethod(){
        this.parent.aPublicProperty = 2;
    }
}

这对我很有用，你只需要声明你想要公开的方法或属性。

就我而言，AppComponent处理路由，并且我在菜单项中使用徽章来提醒用户新的未读消息可用。 因此，每当用户读取消息时，我都希望该计数器刷新，因此我调用刷新方法，以便菜单导航中的数字更新为新值。 这可能不是最好的方式，但我喜欢它的简单性。

上一篇: Accessing a property in a parent Component in Angular2 with TypeScript

下一篇: Angular and Typescript: Can't find names