Angular2: наличие нескольких выходных данных на компоненте

Question

В настоящее время я пытаюсь получить компонент в Angular2, но пытаюсь реализовать его с несколькими выходами. У меня есть родительский компонент и компонент NavBar

Родитель компонент:

@Component({ 
    selector:"personal-dashboard", 
    directives:[NavBar], 
    template:` 
     <navbar [hidden]= "!loggedIn" (loggingOut) ="unlogSuccess($event)" (changedTab)="changingTab($event)"></navbar> 
    ` 
}) 

export class PersonalDashboard{ 
    tabNumber:number =0; //0 is for the default Courses tab 


    unlogSuccess(event){ 
     this.loggedIn = false; 
    } 

    changingTab(event){ 
     if(event == 'courses-tab'){ 
      this.tabNumber = 0; 
     } 
     else if (event == 'activities-tab'){ 
      this.tabNumber = 1; 
     } 
    } 
} 

Navbar Компонент:

@Component({ 
    selector:"navbar", 
    template:` 

<ul class="nav navbar-nav"> 
    <li id="courses-tab" class="principal-navbar active"><a href="#" (click)="changingTab('courses-tab')">Courses</a></li> 
    <li id="activity-tab" class="principal-navbar"><a href="#" (click)="changingTab('activity-tab')">Activity</a></li> 
</ul> 
<ul class="nav navbar-nav navbar-right"> 
    <li><a href=# (click)="logout()">Logout</a></li> 

</ul> 

    ` 
}) 

export class NavBar{ 
    @Output() loggingOut = new EventEmitter(); 
    @Output() changedTab = new EventEmitter(); 

    logout(){ 
     Cookies.remove("oauth_token"); 
     Cookies.remove("coursesData"); 
     this.loggingOut.emit(true); 
    } 

    changingTab(tabName){ 
     (<any>$("li.principal-navbar")).each(function(index){ 
      if ((<any>$(this)).attr('id') == tabName){ 
       (<any>$(this)).addClass("active"); 
       this.changedTab.emit(tabName); 
      } 
      else{ 
       (<any>$(this)).removeClass("active"); 
      } 
     }); 
    } 
} 

Я упростил файлы, так это выглядит более четким. То, что я пытаюсь сделать, - это два возможных выхода из навигационной панели, которые запускаются щелчками на разных частях навигационной панели. Одним из них является изменение действия вкладки, а другое - действие выхода из системы. Итак, я попытался записать в родительском компоненте, что компонент navbar должен иметь два разных выхода, и я обрабатываю их двумя разными способами в родительском компоненте (методы unlogSuccess и changeTab).

Я также создал в компоненте navbar два выхода с декоратором @Output. Затем, в другой части шаблона, я запускаю разную функцию класса navbar, которые генерируют события для двух разных Output, которые я создал.

У меня нет проблем, когда я скомпилирую. Однако, когда я пытаюсь запустить второй вывод, который я создал, он говорит, что «this.changedTab» не определен. Он отлично работает для вывода loggingOut, который я создаю первым. Так что я думал, что, возможно, angular2 не позволяет создавать несколько выходов на простом компоненте.

Как я описал свою проблему, вы можете подтвердить это? Невозможно ли иметь несколько выходов в одном компоненте? Если да, то каков хороший способ сделать то, что я пытаюсь достичь?

Answer 1

Вы должны использовать функцию стрелки, чтобы иметь возможность использовать лексический this:

(<any>$("li.principal-navbar")).each((index) => { // <------- 
     if ((<any>$(this)).attr('id') == tabName){ 
      (<any>$(this)).addClass("active"); 
      this.changedTab.emit(tabName); 
     } 
     else{ 
      (<any>$(this)).removeClass("active"); 
     } 
    }); 
}