app.component.html中的组件未更新

Question

我想在app.component.html中制作应用的布局

我用选择器制作了一个菜单组件

现在我的代码如下：

<app-menu></app-menu>
<router-outlet></router-outlet>

通过检查用户是否登录来隐藏和显示菜单页面，但是如果我将菜单放在app.component中，则仅当我从浏览器刷新页面时菜单才会更新

Answer 1

就像您评论的帖子：How to Update a Component without refreshing full page - Angular

您应该使用BehaviorSubject。

让我们说您拥有一个带有BehaviorSubject的服务。

CustomService：

@Injectable()
export class CustomService {
   public isLoggedIn$: Observable<boolean>;
   private _sourceUserLoggedIn = new BehaviorSubject<boolean>(false);

   constructor() {
     this.isLoggedIn$ = this._sourceUserLoggedIn.asObservable();
   }

   setLoggedIn(value: boolean): void {
     this._sourceUserLoggedIn.emit(value);
   }
}

然后在AppComponent.ts中

export class AppComponent {
   constructor(private customService: CustomService) {}
   public get isLoggedIn$(): Observable<boolean> {
     return this.customService.isLoggedIn();
   }
}

最后在AppComponent.html

中

<app-menu *ngIf="this.isLoggedIn$ | async"></app-menu>
<router-outlet></router-outlet>

应该可以。