代码之家 › 专栏 › 技术社区 › Interlated

如何使用角度@输入强制进行更改?

angular javascript

Interlated · 技术社区 · 5 年前

父组件

export class HomeComponent implements OnInit {
  aggregate = true;

子组件还具有“aggregate”属性

export class IssuerTypeIssuerCountStackedBarComponent extends BondsChart implements BondsChartInteract, OnInit, OnChanges {
 @Input() aggregate = false;

<app-issuer-type-issuer-count-stacked-bar *ngIf="series === 'Number of Issuers'"
                                          [aggregate]="aggregate"
</app-issuer-type-issuer-count-stacked-bar>

可以使用切换将子级中的聚合值设置为等于true。

@Input() set year(value: (string | number)) {
if (value) {
  this.aggregate = true;
  this._year = value;
  if (Number(value)) {
    this.aggregate = false;
  }
}

然而,由于父级中的“聚合”最初为false,然后在子组件上设置为true,因此将聚合设置为false不会触发父级的更改。

0 回复 | 直到 5 年前

Interlated 5 年前

@ViewChildren解决了这个问题

在父零部件中,标记每个子零部件

<app-issuer-type-deal-count-stacked-bar #bondChart 
                                        [aggregate]="aggregate"
</app-issuer-type-deal-count-stacked-bar>

使用@ViewChildren创建这些组件的列表

@ViewChildren('bondChart') bondCharts: QueryList<any>;

if (Number(value)) {
  this.aggregate = false;
  this.bondCharts.forEach(chart => chart.aggregate = false);
}

Airas Yaqub 5 年前

据我目前所知,子组件正在从父组件获取正确的属性值。您想要实现的是,如果子组件中的子聚合值发生更改,则更改某些父属性。这里需要的是自定义@输出事件

在子组件中

@Output() aggregateChanged: EventEmitter<any> = new EventEmitter<any>();

toggleChange(){
   this.aggregateChanged.emit('any value you want to emit')
}

在父组件中

   <app-issuer-type-deal-count-stacked-bar #bondChart [aggregate]="aggregate" (aggregateChanged)="anyFunction($event)"
    </app-issuer-type-deal-count-stacked-bar>

然后在anyFunction(valueEmittedFromChild)中实现您想要的任何逻辑。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前