Question

我有父和子组件。父组件有一个菜单。当子组件显示this.service.isMenuVisible（false）时，菜单在父组件中仍然可见。我没有错。

从父到子组件的更新进行自动角度检查，这意味着我尝试在检查父组件后更改表达式...

如何使用我的共享单件服务正确修复该方案？

export class RouterService {
  public id: number = 0;
  constructor(private router: Router,private route: ActivatedRoute) {

    this.router.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {

        if (event.url == "/projects/create") {
          console.log(event.url)
         this.setIsMenuVisible(false);
        }
        else {
          console.log(event.url);
          this.setIsMenuVisible(true);
        }

        var first = event.state.root.firstChild.firstChild;
        var id = first && event.state.root.firstChild.firstChild.params['id'];
        this.id = +id;
      }
    });
  }

  private isMenuVisible: BehaviorSubject<Boolean> = new BehaviorSubject(false);

  setIsMenuVisible(isMenuVisible: Boolean): void
  {
    this.isMenuVisible.next(isMenuVisible);
  }  

  getIsMenuVisible(): Observable<Boolean> {
    return this.isMenuVisible.asObservable();
  }

}

父母组件

    ngOnInit()
    {
   this.service.id === 0 ? this.service.setIsMenuVisible(false) : this.service.setIsMenuVisible(true);

    }

HTML

<ul class="navbar-nav ml-auto mx-4" *ngIf="service.getIsMenuVisible">
...
</ul>

儿童组件

ngOnInit()
{
    this.service.setIsMenuVisible(false);
}

Answer 1

让您的孩子通过eventemitter向父母提供isMenuVisible的值，并让父母使用它来设置this.service.isMenuVisible

Answer 2

如果我理解正确，请在父母中使用getter。如果您可以提供一些代码，了解这是如何使用MenuVisible，我可以提供一个示例。

以下是我如何将其与我服务中的showImage标志一起使用的示例。

在我的组件中：

get showImage(): boolean {
    return this.movieParameterService.displayPosters;
}
set showImage(value: boolean) {
    this.movieParameterService.displayPosters = value;
}

这确保了如果服务值发生变化，组件的变化检测将获取变化并做出相应的反应。

现在你发布了一些代码......你可以改变这个：

  private isMenuVisible: BehaviorSubject<Boolean> = new BehaviorSubject(false);

  setIsMenuVisible(isMenuVisible: Boolean): void
  {
    this.isMenuVisible.next(isMenuVisible);
  }  

  getIsMenuVisible(): Observable<Boolean> {
    return this.isMenuVisible.asObservable();
  }

就这样：

  isMenuVisible: boolean = false;

然后你的HTML就是这样：

<ul class="navbar-nav ml-auto mx-4" *ngIf="service.isMenuVisible">

或者更好地封装它：

<ul class="navbar-nav ml-auto mx-4" *ngIf="isMenuVisible">

在组件中：

get isMenuVisible(): boolean {
    return this.service.isMenuVisible;
}

从子组件触发时，不会更新共享服务上与* ngIf的父组件绑定

2 个答案: