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

Question

请参阅以下plunker

我希望能够在呈现选项卡之后选择一个选项卡，但出现错误ExpressionChangedAfterItHaHasBeenCheckedError。如果此特定路由具有ID值，然后加载实体，然后选择详细信息选项卡，则该场景将刷新浏览器。

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变量设置为detail选项卡。

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