從 Angular 中的孫組件訪問祖父組件屬性

Question

我正在構建一個 Angular 應用程序，需要訪問組件 3 中組件 1 的一個屬性。組件 1 和組件 3 之間的關系是祖孫關系。

我已經成功地直接實現了父/子組件之間的通信（即從組件 1 到組件 2 和從組件 2 到組件 3（注意組件 3 是組件 2 的子組件，組件 2 是組件 1 的子組件）。只需要單向通信（即從子組件中的（大）父組件訪問屬性）。

您可以在下面看到我的應用程序的結構。 我也使用共享服務。

組件 1.ts

import { Component, OnInit } from '@angular/core'
import { StrategyService } from './shared/strategy.service'

@Component({
    selector: 'strategies-list',
    templateUrl: './strategies-list.component.html'        
})

export class StrategiesListComponent implements OnInit {
    strategies:any[]
    constructor(private strategyService: StrategyService) {

    }

    ngOnInit() {
        this.strategies = this.strategyService.getStrategies()
    }

}

組件 1.html

<div>
<h1>Strategies</h1>
<hr/>
<strategy-thumbnail *ngFor = "let strategy of strategies" [strategy] = "strategy">  </strategy-thumbnail> 
</div>

組件 2.ts

import { StrategyService } from './shared/strategy.service'


@Component ({
    selector:'strategy-thumbnail',
    templateUrl:'./strategy-thumbnail.component.html',
    styles: [`
        .pad-left { margin-left: 10px; }
        .well div { color: #bbb; }
        `]
})

export class StrategyThumbnailComponent implements OnInit {
    @Input() strategy:any
    psets:any

    constructor(private strategyService: StrategyService) {

    }

    ngOnInit() {
        this.psets =this.strategyService.getParameterSets(this.strategy.Name)
    }



}

組件 2.html

<div class="well">
    {{strategy?.Name}}
    <param-set *ngFor = "let pset of psets" [pset] = "pset"> </param-set>

</div>

組件 3.ts

import { Component, Input, OnInit } from '@angular/core'
import { StrategyService } from '../strategies/shared/strategy.service'




@Component ({
    selector:'param-set',
    templateUrl:'./param-set.component.html'
})

export class ParamSetComponent {
    @Input() pset: any
    @Input() strategy: any
    returns: any




    constructor(private strategyService: StrategyService) {

    }

    ngOnInit() {

        this.returns = this.strategyService.getReturns(***SomeStrategyName***,this.pset.Name)
    }


}

組件 3.html

<div> {{pset?.Name}} </div>


<return-vector *ngFor = "let return of returns" [return] = "return"> </return-vector>

組件 4.ts

import { Component, Input } from '@angular/core'



@Component ({
    selector:'return-vector',
    templateUrl:'./return-vector.component.html'
})

export class ReturnVectorComponent {
    @Input() strategy:any
    @Input() pset: any
    @Input() return: any
}

組件 4.html

<div>Period: {{return?.period}}, Return: {{return?.return}}</div>

策略.service.ts

import { Injectable } from '@angular/core'


@Injectable()

export class StrategyService {
    getStrategies() {
        return STRATEGIES
    }

    getStrategy(Name:string) {
        return this.getStrategies().find(strat => strat.Name === Name)
    }

    getParameterSets (Name: string) {
        return this.getStrategy(Name).PSETS
    }

    getParameterSet (StrategyName, PSetName) {
        return this.getParameterSets(StrategyName).find(pset => pset.Name === PSetName)
    }

    getReturns (StrategyName, PSetName) {
        return this.getParameterSet(StrategyName, PSetName).Returns
    }

    getReturn(StrategyName, PSetName, Period) {
        return this.getReturns(StrategyName, PSetName).find(returnperiod => returnperiod.period === Period)
    }

}

const STRATEGIES = [
    { "Name": "SomeStrategyName1", "PSETS: [{"Name":"SomePSetName1", "Returns": [{ "period": "someperiod1", "return" : somenumber1}, {"period": "someperiod2", "return" : somenumber2}]}, {"Name":"SomePSetName2", "Returns": [{ "period": "someperiod3", "return" : somenumber3}, {"period": "someperiod4", "return" : somenumber4}]}]},

{ "Name": "SomeStrategyName2", "PSETS: [{"Name":"SomePSetName3", "Returns": [{ "period": "someperiod5", "return" : somenumber5}, {"period": "someperiod6", "return" : somenumber6}]}, {"Name":"SomePSetName4", "Returns": [{ "period": "someperiod3", "return" : somenumber3}, {"period": "someperiod4", "return" : somenumber4}]}]},

...

{ "Name": "SomeStrategyNameK", "PSETS: [{"Name":"SomePSetName3", "Returns": [{ "period": "someperiod5", "return" : somenumber5}, {"period": "someperiod6", "return" : somenumber6}]}, {"Name":"SomePSetName4", "Returns": [{ "period": "someperiod3", "return" : somenumber3}, {"period": "someperiod4", "return" : somenumber4}]}]}]

在上面的代碼中，除了一件事之外，一切都按預期工作：在組件 3.ts 中，我想訪問一些特定的返回集。 如果我輸入一些特定的策略名稱（例如“SomeStrategyName1”），我的代碼就可以工作。 但我希望這個策略名稱特定於我正在循環的策略。

我已經嘗試用 this.strategy.Name 替換“SomeStrategyName1”，因為我已經使用了兩次輸入參數（一次在組件 3 中，一次在組件 2 中）。 在組件 2 中，這是有效的：在 ts 文件中調用 getParameterSets 函數時，我可以成功訪問 this.strategy 的 Name 屬性。

但是，在組件 3 中，這不起作用。 我在 ParamSetComponent.ngOnInit 收到一個 TypeError：無法讀取未定義的屬性“名稱”。

Answer 1

您需要將組件 2 模板中的strategy傳遞給param-set組件，因為它需要一個：

<div class="well">
  {{strategy?.Name}}
  <param-set 
    *ngFor="let pset of psets" 
    [pset]="pset" 
    [strategy]="strategy">
  </param-set>
</div>

您還必須對組件 3 等執行相同操作...

<div> {{pset?.Name}} </div>
<return-vector 
  *ngFor="let return of returns" 
  [pset]="pset"
  [strategy]="strategy"
  [return]="return">
</return-vector>