角度输入设置器仅触发一次

Question

我想在问题前面加一个词，说我已经阅读并理解了其他可能重复的问题（例如这个问题），并且无法进行这项工作，使我相信问题本质上有点不同，或者我误解了一些东西。

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

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

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

问题：在我第一次更换过滤器后，管道仅被调用一次。这样显示时，主视图中的filterObject变量显示正确更新，{{filterObject | json}}但从未调用setter。在setter和getter中放置的控制台日志显示只有getter可以访问（2-4）

我尝试过的解决方案：

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

• 使管道不纯净（可行但不是一个很好的解决方案，因为它使每次单击处理2至4次非常大的复杂对象数组）

• 使父级更新过滤器变量不是通过赋值运算符，而是通过Object.assign它来更改引用并可能触发设置器

我正在考虑的解决方案：如果我无法弄清楚问题出在哪里，我正在考虑提供一种通过观察者在两个组件之间进行通信的服务。否则，我可能不得不适应嵌入了一些自定义更改检测的不纯管道（我正在考虑将过滤器对象转换为JSON字符串并检查长度）。

side-menu-component.html

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

侧面菜单组件

 @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>

父组件

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

main-view-component.html

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

main-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

我真的很想“成角度的方式”，所以我想问的是我在这里想念的是什么？

Answer 1

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