typescript - angular - 使用TypeScript訪問Angular2中父組件中的屬性

  显示原文与译文双语对照的内容
82 1
时间:原作者:0个回答

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;
}
原作者:
...