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

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

Afair角度检查从 parent 到 children 组件的更新，这意味着我尝试在检查父组件后更改表达式...

我应该如何使用共享单件服务正确修复该场景？

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();
  }

}

PARENT Component

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>

CHILD Component

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

2 回答

0

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

回复于 2024-05-05T08:21:20+08:00

如果我理解正确，请在父级中使用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;
}

回复于 2024-05-05T08:21:20+08:00

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

2 回答

相关问题