如何在不重新加载页面的情况下跟踪树 DOM 更改？角

Question

我需要你的帮助。我有一小段代码，我试图用它来实现以下逻辑 - 我有一个菜单列表。如果我有

root

角色，则不要删除任何内容，但如果非 root 角色已更改，则删除菜单项。现在我的逻辑有效，但只有在重新加载页面后才有效。具有 root 角色，更改为另一个角色，并且只有在重新加载页面后才会删除该元素。不幸的是，

ChangeDetectorRef

，

MutationObserver

和

applicationRef.tick()

并没有帮助我。请告诉我如何跟踪它或在不重新启动的情况下删除和添加其结果？非常感谢你

@ViewChildren('menuItems') menuElements: QueryList<ElementRef>;

ngAfterViewInit() {
    let menuArrayElements = this.menuElements.toArray();
    let element = menuArrayElements.find((el) => el.nativeElement.innerText === 'Platform setup');
    if (this.role !== 'root') {
        element.nativeElement.parentNode.removeChild(element.nativeElement);
    }

    const observer = new MutationObserver(list => {
        console.log(list)
    })
    observer.observe(element.nativeElement, { childList: true, subtree: true });
}

Answer 1

我建议使用 Angular 工具，除了调用 DOM API 之外。我的意思是你不应该直接在 Angular 应用程序中使用

removeChild

。相反，我建议使用绑定。例如，您可以在组件中编写：

private role$ = new BehaviorSubject('root');  // should be updated when the role changes

private menuItems$ = [{
   name: 'first link',
   href: '/first',
   rootOnly: false
}, {
   name: 'second link',
   href: '/second',
   rootOnly: true
}];

// an observable that removes menu item when the role changes
menuItemsProtected$ = combineLatest([this.role$, this.menuItems$]).pipe(
  map(([role, items]) => {
    if (role === 'root') {
      return items;
    }
    return items.filter((e) => !e.rootOnly);
  })
);

然后在您的模板中：

<ul *ngFor="let item of menuItemsProtected$ | async">
  <li>
    <a [routerLink]="item.href">
      {{item.name}}
    </a>
  </li>
</ul>

现在您只需将

role$

实现为BehaviorSubject（例如），请在此处查看更多详细信息https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject