视图初始化后更改 ng bootstrap 活动选项卡

Question

请看下面plunker

我希望能够在选项卡呈现后 select 选项卡，但我收到错误 ExpressionChangedAfterItHasBeenCheckedError。如果此特定路由具有 ID 值，则场景会在浏览器刷新时加载实体，然后 select 详细信息选项卡。

ngAfterViewInit() {
    let id = this.route.snapshot.params['id'];
    if(null!=id) {
      this.loadEntity(id);
      this.tabs.select('detail');
    }
  }

Answer 1

我通过在组件中选择一个变量选项卡然后将选项卡的 activeId 设置为此变量来解决这个问题。

<ngb-tabset [activeId]="selectedTab">

在组件的 onInit 中，如果路由包含 ID，我将此 selectedTab 变量设置为详细信息选项卡...

let id = this.route.snapshot.params['id'];
if(null!=id) {
  this.loadEntity(id);
  this.selectedTab = 'detail';
}

视图初始化后更改 ng bootstrap 活动选项卡

change ng bootstrap active tab after view initialised

ng-bootstrap

angular