Angular 输入 setter 仅触发一次

Question

我想在问题前说我已经阅读并理解其他可能重复的问题(例如 this one )并且无法完成这项工作让我相信问题在本质上有点不同或者我误会了什么。

上下文:我有一个父组件和两个子组件(一个侧边菜单和一个主视图)。侧面菜单有一些复选框形式的过滤器，通过 [(ngModel)] 绑定(bind)到对象，并使用 (ngModelChange)="changeFilter()" 触发事件模板。

在父组件中，我捕获了事件:(filter)="updateFilters($event)"。此函数更改一个公共(public)过滤器变量，然后我将其传递给其他子组件，如下所示:[filterObject]="filters"

在主视图组件中，我将 filterObject 变量提供给管道以过滤对象数组。

问题:在我第一次更改过滤器后，管道只被调用一次。主视图中的 filterObject 变量显示正确更新时显示如下 {{filterObject | json}} 但永远不会调用 setter。 setter 和 getter 中的控制台日志显示只有 getter 正在访问(2-4)

我尝试过的解决方案:

• 向管道添加一个附加参数以触发它。这种方法的问题是需要从 filterObject 的 setter 中设置一个新日期，它不会被调用 - 如上所述

• 使管道不纯(可行但不是真正好的解决方案，因为它使它每次点击处理非常大的复杂对象数组 2-4 次)

• 让父级更新过滤器变量，不是通过赋值运算符，而是通过 Object.assign 以更改引用并可能触发 setter

我正在考虑的解决方案:如果我无法找出问题所在，我正在考虑制作一个服务，通过观察者在两个组件之间进行通信。否则我可能不得不接受一个嵌入了一些自定义变化检测的不纯管道(我正在考虑将过滤器对象转换为 JSON 字符串并检查长度)。

side-menu-component.html

<input type="checkbox" id="filter-type-2" name="filter-type-2" [(ngModel)]="filterObject.type.me" (ngModelChange)="changeFilter()">

side-menu-component.ts

 @Output() filter = new EventEmitter();
 public filterObject = {
    type: {
        mo: true,
        me: true,
        ar: true,
        cto: true,
        gl: true,
        dl: true
    },
    status: {
        unreviewed: true,
        approved: true,
        other: true
    }
};

// ...

changeFilter() {
    this.filter.emit(this.filterObject);
}

parent-component.html

<aside>
     <app-article-view-aside [article]="article" (close)="closeModal($event)" (filter)="updateFilters($event)"></app-article-view-aside>
</aside>
<div class="articleContainerMainView">
     <app-article-view-main [article]="article" [filterObject]="filters"></app-article-view-main>
</div>

parent-component.ts

updateFilters(newFilter) {
    this.filters = newFilter;
}

ma​​in-view-component.html

<app-finding
        *ngFor="let finding of findings | findingsFilter:filterDate:filterObject; let i = index"
        [finding]="finding"></app-finding>

ma​​in-view-component.ts

@Input() set filterObject(filterObject) {
    console.log('setter');
    this._filterObject = filterObject;
    this.filterDate = Date.now();
}

get filterObject() {
    console.log('getter');
    return this._filterObject;
}

private _filterObject = {};

public filterDate = Date.now();

首次显示页面时的控制台输出:

setter
getter
getter
getter
getter

我真的很想用“Angular Way”来做，所以我想问你的是我在这里缺少什么？

Answer 1

可能是您的侧边菜单组件发出相同的对象。它的内容可能会改变，但发出的对象仍然是一样的。考虑改为发出对象的副本。 Object.assign({}, this.filterObject) 可能对您有所帮助。