[英]Accessing grandparent-component properties from grandchild-component in Angular
I'm building an Angular application and need to access a property of Component 1 in Component 3. The relationship between component 1 and component 3 is grandparent-grandchild.我正在构建一个 Angular 应用程序,需要访问组件 3 中组件 1 的一个属性。组件 1 和组件 3 之间的关系是祖孙关系。
I've successfully implemented communication between parent/child components directly (ie from component 1 to component 2 and from component 2 to component 3 (note that component 3 is the child of component 2 and component 2 is the child of component 1). I only need one-way communication (ie accessing properties from (grand)parent-components in the child-component).我已经成功地直接实现了父/子组件之间的通信(即从组件 1 到组件 2 和从组件 2 到组件 3(注意组件 3 是组件 2 的子组件,组件 2 是组件 1 的子组件)。只需要单向通信(即从子组件中的(大)父组件访问属性)。
Below you can see the structure of my application.您可以在下面看到我的应用程序的结构。 I also make use of shared services.我也使用共享服务。
Component 1.ts组件 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()
}
}
Component 1.html组件 1.html
<div>
<h1>Strategies</h1>
<hr/>
<strategy-thumbnail *ngFor = "let strategy of strategies" [strategy] = "strategy"> </strategy-thumbnail>
</div>
Component 2.ts组件 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)
}
}
Component 2.html组件 2.html
<div class="well">
{{strategy?.Name}}
<param-set *ngFor = "let pset of psets" [pset] = "pset"> </param-set>
</div>
Component 3.ts组件 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)
}
}
Component 3.html组件 3.html
<div> {{pset?.Name}} </div>
<return-vector *ngFor = "let return of returns" [return] = "return"> </return-vector>
Component 4.ts组件 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
}
Component 4.html组件 4.html
<div>Period: {{return?.period}}, Return: {{return?.return}}</div>
strategy.service.ts策略.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}]}]}]
In the code above, everything works as expected apart from one thing: in component 3.ts I want to access some specific return set.在上面的代码中,除了一件事之外,一切都按预期工作:在组件 3.ts 中,我想访问一些特定的返回集。 If I input some specific strategy name (eg "SomeStrategyName1"), my code works.如果我输入一些特定的策略名称(例如“SomeStrategyName1”),我的代码就可以工作。 But I want this strategy name to be specific to the strategies I'm looping through.但我希望这个策略名称特定于我正在循环的策略。
I've tried replacing "SomeStrategyName1" with this.strategy.Name since I've used the input parameter twice (once in component 3 and once in component 2).我已经尝试用 this.strategy.Name 替换“SomeStrategyName1”,因为我已经使用了两次输入参数(一次在组件 3 中,一次在组件 2 中)。 In component 2, this works: I can successfully access the Name property of this.strategy when calling the getParameterSets function in the ts-file.在组件 2 中,这是有效的:在 ts 文件中调用 getParameterSets 函数时,我可以成功访问 this.strategy 的 Name 属性。
In Component 3 however, this does not work.但是,在组件 3 中,这不起作用。 I get a TypeError: Cannot read property 'Name' of undefined at ParamSetComponent.ngOnInit.我在 ParamSetComponent.ngOnInit 收到一个 TypeError:无法读取未定义的属性“名称”。
You need to pass strategy
in Component 2 Template to param-set
component as it expects one:您需要将组件 2 模板中的strategy
传递给param-set
组件,因为它需要一个:
<div class="well">
{{strategy?.Name}}
<param-set
*ngFor="let pset of psets"
[pset]="pset"
[strategy]="strategy">
</param-set>
</div>
You'll also have to do the same for Component 3 and so on...您还必须对组件 3 等执行相同操作...
<div> {{pset?.Name}} </div>
<return-vector
*ngFor="let return of returns"
[pset]="pset"
[strategy]="strategy"
[return]="return">
</return-vector>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.