typescript - angular - 使用TypeScript访问Angular2中父组件中的属性

82 1
时间: 原作者:

61 1

有不同的方法:

export class Profile implements OnInit {
constructor(@Host() parent: App) {
 parent.userStatus.. .
}
  • 数据绑定
export class Profile implements OnInit {
 @Input() userStatus:UserStatus;
. . .
}
<profile [userStatus]="userStatus">
原作者:
54 5

我有同样的问题,但我解决了。 我不知道这是否是一种好的方法,但是它是非常适合我所需要的。

我在子组件的构造函数上使用了 @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处理路由,并且我在菜单项中使用标记来提醒用户新的未读消息可用。 因这里每次读取消息时,我都希望计数器刷新,因这里我调用update方法来更新菜单中的数字。 这可能不是最好的方式,但我喜欢它的简单性。

原作者:
114 1

你可以:

  • 定义子组件的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;
     }
     (...)
    }

    在它们之间循环依赖关系时要小心。

原作者:
123 3

我制作了一个通用组件,我需要使用它对父组件的引用。 以下是我所提出的内容:

在我的组件中,我创建了一个 @Input:

@Input()
parent: any;

然后使用这里组件在父对象中:

<app-super-component [parent]="this"> </app-super-component>

在超级组件中,我可以使用来自父组件的任何 comping:

属性:

parent.anyAttribute

函数:

parent[myFunction](anyParameter)
60 2

在 Angular 6上,通过通过构造函数注入父属性来访问父属性。 不是最好的解决方案,但它有效:

 constructor(@Optional() public parentComponentInjectionObject: ParentComponent){
//And access like this:
 parentComponentInjectionObject.thePropertyYouWantToAccess;
}
原作者:
...