这不是async pipe的工作方式。异步管道自动订阅observable，并获取其值。在你的情况下，你不想这样做，你只是想通过可观察的。你不需要使用async pipe，只需要这样做：

<app-sidebar [scope$]="scope$"></app-sidebar>

在app-sidebar中：

@Input
scope$: Observable<Roles> = this.scopeService.scope$;

ngOnInit(): void {
    this.scope$.subscribe();
  }

编辑：
在检查了你的stackblitz之后，我知道你的问题在哪里了。在你的has-permission指令中，你使用了作用域的snapshot而不是订阅它。你应该这样做：

ngOnInit(): void {
    this.scopeService.scope$.subscribe((newScope) => {
      this.scope = newScope;
      this.checkPermissions();
    });
  }

这样，每次范围更改时，都会调用checkPermissions（）方法。您仍然需要修复如何显示元素，因为它存在一些问题。您似乎没有清除scole已经拥有权限的选项，并且创建了一个新选项，使其重复。你可以通过像这样制作showElement来修复它：

showElement(canShow: boolean): void {
    this.viewContainer.clear();
    if (canShow) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }