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;


}



原作者:
...