为什么即使变量没有改变，@HostBinding也会连续触发？(棱角分明)

Question

我加入了一个新的Angular项目，在app.component.ts上有一些@HostBindings被不间断地调用，即使没有直接触发事件。示例：

settings = {
layout: { isCollapsed: false }
}

@HostBinding('class.aside-collapsed') get isCollapsed() {
return this.settings.layout.isCollapsed;
};

布局对象是SettingsService的一部分，只有在切换侧菜单时，属性才会更改：头组件.ts:

toggleMobileMenu(event: any) {
event.preventDefault();
this.settings.layout.isCollapsed = !this.settings.layout.isCollapsed;
}

Answer 1

使用突变观测器的非角度破解

const targetNode = document.querySelector('element_on_which_class_exists');
const config = { attributes: true, childList: false, characterData: false };
const callBack = (mutations) => {
mutations.forEach(({ type, attributeName, target: { classList } }) => {
if (type === 'attributes' && attributeName === 'class') {
// Do something here ...
}
});
}
const isCollapsedMutationObserver = new MutationObserver(callBack);
isCollapsedMutationObserver.observe(targetNode, config);
ngOnDestory() {
isCollapsedMutationObserver.disconnect();
}