更新导航栏中的路线答案

【问题标题】：updating routes in navbar更新导航栏中的路线
【发布时间】：2020-11-10 23:11:24
【问题描述】：

我正在写一个工作中的公共网页，角度为 9，其中可能的路线数组取决于用户的角色。我从 HTTP 请求中获取角色，并且响应更新了一个 observable，它将被传递给子组件。

问题是：收到响应但没有更新模板。

这里是组件代码：

   

@Component({
  selector: 'navbar',
  template: `<nav-template [routesArray]="routesArrayObservable | async"></nav-template>`
})
export class NavbarComponent implements OnInit {

  private routesSubject: BehaviorSubject<AppRoute[]>;
  routesArrayObservable: Observable<AppRoute[]>;

  constructor(private accountService: AccountService) {
    this.routesSubject = new BehaviorSubject<AppRoute[]>(null);
    this.routesArrayObservable = this.routesSubject.asObservable();
  }

  ngOnInit(): void {
    this.accountService.subscribableRole().subscribe((actualRole: string) => {
      this.routesSubject.next(ruoli[actualRole]);
    });
  }

}

@Component({
  selector: 'nav-template',
  templateUrl: './navbar.component.html',
})
export class NavbarTemplate implements OnInit, OnChanges{
  @Input() routesArray: AppRoute[];
  user: Observable<User>;

  constructor(private accountService: AccountService){
    this.user = null;
  }

  ngOnInit(): void {
    this.user = this.accountService.user;
  }

  ngOnChanges(changes: SimpleChanges){
    for (let propName in changes) {
      if (propName === 'routesArray'){
        this.routesArray = changes[propName].currentValue;
      }
    }
  }

}

和 HTML 模板：

<nav class="navbar navbar-expand navbar-dark bg-dark"  *ngIf="user | async">
    <div class="navbar-nav" *ngIf="routesArray.length"> 
        <a *ngFor="let route of routesArray" class="nav-item nav-link" 
              routerLink="{{ route.routerLink }}">{{ route.name }}</a>
    </div>
    <div class="nav-account">
        <nav-account></nav-account>
    </div>
</nav>

【问题讨论】：

标签： navbar observer-pattern angular9

【解决方案1】：

已解决：subscribe() 函数中的代码不在 NgZone 中。

我将包含另一个问题，其中包含更多数据和解释。

solution

【讨论】：