Question

我正在使用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);
}

Answer 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);
   }

}

PARENT widget.component.html

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

希望有帮助，祝你好运！

子组件元素ngxbootstrap选项卡中的活动父组件选项卡：角6

1 个答案: