关于angular：使用TypeScript访问Angular2中父组件中的属性


Accessing a property in a parent Component in Angular2 with TypeScript

在过去4年里，我一直在和Angular1*一起愉快地工作，现在我正在努力自学Angular2和打字。无论如何，我在一个顶级组件中有一个属性，它是来自这样一个HTTP源的用户数据…(这是一个名为app.ts的文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import {UserData} from './services/user-data/UserData';

Component({
    selector: '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"，这里是子组件…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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！！！！)把这些数据放在我的$rootScope中，我真是太愚蠢了。在Angular2中访问父级的最佳方式是什么？事先谢谢。

有不同的方法：

  • 全球服务

    • 也见
    • https://github.com/escardin/angular2 community faq/blob/master/services.md how-do-i-communication-between-components-using-a-shared-service
    • 角度2中的全局事件
    • 柱塞

  • 由父级共享并注入子级的服务

    • 与Global Service类似，但列在providers或viewProviders中的是父级，而不是boostrap(...)中的，并且仅对父级的子级可用。

  • 父对象被注入子对象并由子对象直接访问

    • 缺点：耦合紧密
1
2
3
4
export class Profile implements OnInit {
constructor(@Host() parent: App) {
  parent.userStatus ...
}
  • 数据绑定
1
2
3
4
5
6
export class Profile implements OnInit {
  @Input() userStatus:UserStatus;
  ...
}

<profile [userStatus]="userStatus">
相关讨论

我也有同样的问题，但我用不同的方法解决了它。我不知道这是不是一个好的方法，但它很适合我需要的。

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

1
2
3
4
5
6
7
8
9
10
11
12
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;
    }
}

这对我很有效，您只需要将要调用的方法或属性声明为public。

在我的例子中，AppComponent处理路由，我使用菜单项中的徽章来提醒用户有新的未读消息可用。所以每当用户读到一条消息，我都希望计数器刷新，所以我调用刷新方法，这样菜单导航中的数字就会更新为新的值。这可能不是最好的方法，但我喜欢它的简单。

相关讨论

你可以：

  • 为子组件定义一个userStatus参数，并在从父组件使用此组件时提供该值：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @Component({
      (...)
    })
    export class Profile implements OnInit {
      @Input()
      userStatus:UserStatus;

      (...)
    }

    在父母身上：

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

  • 将父组件插入子组件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @Component({
      (...)
    })
    export class Profile implements OnInit {
      constructor(app:App) {
        this.userStatus = app.userStatus;
      }

      (...)
    }

    注意它们之间的循环依赖关系。

我制作了一个通用组件，需要使用它引用父组件。我想到的是：

在我的组件中，我做了一个@输入：

1
2
@Input()
parent: any;

然后在使用此组件的父级中：

1
 </app-super-component>

在超级组件中，我可以使用来自父组件的任何组件：

属性：

1
parent.anyAttribute

功能：

1
parent[myFunction](anyParameter)

在Angular6上，我通过构造函数注入父属性来访问父属性。不是最好的解决方案，但它有效：

1
2
3
4
 constructor(@Optional() public parentComponentInjectionObject: ParentComponent){
    // And access like this:
    parentComponentInjectionObject.thePropertyYouWantToAccess;
}
相关讨论