Вкладка активного родительского компонента из дочерних элементов компонента ngxbootstrap tab: angular 6 - PullRequest
Новая
       36

Вкладка активного родительского компонента из дочерних элементов компонента ngxbootstrap tab: angular 6

0 голосов
/ 10 января 2019

Я использую вкладки из ngx-bootstrap, которые я поместил в родительский компонент. Я пытаюсь переключить активные вкладки в родительском компоненте по ссылке в дочернем компоненте. Я вижу, что метод setTab работает, когда я вызываю функцию selectTab () из моего родительского компонента. Но когда я хочу сделать то же самое из моего дочернего компонента (компонента входа в систему), он не работает, и я получаю следующую ошибку: 

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

1 Ответ

0 голосов
/ 22 января 2019

Дочерний компонент не знает 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>

Надеюсь, это поможет, удачи!

...