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;


}



原作者:
...