通过变量与 Getter 将数据传递给组件之间的区别

Posted 2023-02-23

【中文标题】通过变量与 Getter 将数据传递给组件之间的区别

【英文标题】：Difference between passing data to a component via Variable vs Getter

【发布时间】：2021-01-13 23:17:24

【问题描述】：

我通过 @Input() 装饰器将数据传递给子组件时遇到了问题。

子组件.ts：

export class ViolationListComponent implements OnInit 
    @Input() violations: string[];
    public displayedColumns: string[] = ['ViolationIndicator', 'Rule'];

  constructor()  

  ngOnInit() 
  

子组件.html：

<div class="d-flex" *ngFor="let ruleViolation of violations">
    <mat-icon matTooltip="Hello">test</mat-icon>
</div>

当通过变量从父级传递violations 时，一旦我将鼠标悬停在元素上，就会显示 matTooltip：

父组件.html：

<app-violation-list [violations]="violations"><app-violation-list>

父组件.ts：

export class ParentComponent implements OnInit 
    public violations = [
      "Violation in Rule 1 occred", 
      "Violation in Rule 2 occred"
    ];

但是当通过 getter 从父级传递 violations 时，matTooltip 不显示：

父组件.html：

<app-violation-list [violations]="RuleViolations"><app-violation-list>

父组件.ts：

export class ParentComponent implements OnInit 

  public get RuleViolations(): string[] 
  return [
      "Violation in Rule 1 occred", 
      "Violation in Rule 2 occred"
    ];

通过 getter 传递的数据在子组件中可用，我可以访问单个值。我认为通过 getter 通过引用传递数据与通过变量传递数据基本相同，但显然不是。这里会发生什么，为什么第一种情况有效而第二种无效？

提前致谢。最好的问候

【问题讨论】：

每次调用 getter 时都会返回一个新引用，如果您的 getter 返回存储在私有字段中的数组，它应该可以按预期工作。

【参考方案1】：

我想你忘记了 RuleViolations 旁边的括号，试试：

<app-violation-list [violations]="RuleViolations()"><app-violation-list>