来自子组件元素的活动父组件选项卡 ngxbootstrap 选项卡：角度 6答案

【问题标题】：Active parent component tab from child component elements ngxbootstrap tab : angular 6来自子组件元素的活动父组件选项卡 ngxbootstrap 选项卡：角度 6
【发布时间】：2019-01-10 12:53:44
【问题描述】：

我正在使用来自 ngx-bootstrap 的选项卡，它已放入我的父组件中。我正在尝试从子组件中的链接切换父组件中的活动选项卡。当我从父组件调用 selectTab() 函数时，我看到 setTab 方法正在工作。但是当我想从我的子组件（登录组件）做同样的事情时，它就不起作用了，我得到了休闲错误：

error: Cannot read property 'tabs' of undefined

我知道我的标签是我的父组件的一部分，这就是我收到此错误的原因。

我也想从我的子组件切换活动选项卡，非常感谢任何帮助。

父级 widget.component.html

<tabset #logRegTab id="logRegTab">
    <tab (select)="fedEffect($event)" class="active" heading="Log In">
      <div [@animationFedInFedOut]="bindingVar" class="tab-pane active" id="login">

        <app-login #logRegTab></app-login>

      </div>
    </tab>
    <tab (select)="fedEffect($event)" heading="Register">
      <div [@animationFedInFedOut]="bindingVar" class="tab-pane" id="signup">

        <app-registration></app-registration>

      </div>
    </tab>
  </tabset>

父级 widget.component.ts

  constructor(private router:Router ) { }
  @ViewChild('logRegTab') staticTabs: TabsetComponent;
  selectTab(tabId: number) {
    this.staticTabs.tabs[tabId].active = true;
  }

儿童：login.component.html

<form id="login" >...</form>
<a (click)="goToRegPage()">Register as Condidate</a>

儿童：login.component.ts

@ViewChild(TabsetComponent) staticTabs: TabsetComponent;

selectTab(tabId: number) {
    this.staticTabs.tabs[tabId].active = true;
  }

goToRegPage()
{
   if(this.router.url='register');
    this.selectTab(1);
}

【问题讨论】：

标签： angular twitter-bootstrap typescript tabs ngx-bootstrap

【解决方案1】：

子组件不知道 TabSetComponent，因为它不是它的一部分。但是，您可以让子组件要求父组件切换到选项卡。这可以使用输出来完成。

儿童：login.component.ts


@Output() outputSelectTab = new EventEmitter<number>();

selectTab(tabId: number) {
    this.outputSelectTab.next(tabId);
  }

goToRegPage()
{
   if(this.router.url === 'register') {
      this.selectTab(1);
   }

}

父 widget.component.html

 <app-login (outputSelectTab)="selectTab($event)" #logRegTab></app-login>

希望对你有帮助，祝你好运！

【讨论】：