Angular2: mehrere Ausgänge auf einer Komponente haben

Question

Ich versuche derzeit, eine Komponente in Angular2 zu haben, aber versuche, es mit mehreren Ausgängen zu implementieren. Ich habe eine übergeordnete Komponente und eine navbar Komponente

Geordnete Komponente:

@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 Komponente:

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

ich die Dateien vereinfacht, so dass es klarer sieht. Was ich versuche zu tun, ist zwei mögliche Ausgänge von der Navbar, die durch Klicks auf verschiedene Teile der Navbar ausgelöst werden. Eine ist eine Änderung der Tab-Aktion und die andere ist eine Logout-Aktion. Also habe ich versucht, in der Elternkomponente zu schreiben, dass die Navbar Komponente zwei verschiedene Ausgaben haben soll und ich behandle sie in zwei verschiedenen Methoden in der Elternkomponente (unlogSuccess und changingTab Methoden).

Ich habe auch in der Navbar Komponente zwei Ausgänge mit dem @Output Dekorator erstellt. Dann trigger ich an verschiedenen Stellen des Templates verschiedene Funktionen der Navbar-Klasse, die Ereignisse an die zwei verschiedenen Outputs ausgeben, die ich erstellt habe.

Ich habe kein Problem, wenn ich kompiliere. Wenn ich jedoch versuche, die zweite von mir erstellte Ausgabe auszulösen, heißt das, dass 'this.changedTab' nicht definiert ist. Es funktioniert perfekt für den LoggingOut-Ausgang, den ich zuerst erstelle. Also dachte ich, dass Sie mit angular2 nicht mehrere Ausgaben auf einer einfachen Komponente erstellen können.

Wie ich mein Problem beschrieben habe, können Sie das bestätigen? Ist es unmöglich, mehrere Ausgänge in einer einzigen Komponente zu haben? Wenn ja, was ist der gute Weg, um das zu erreichen, was ich erreichen möchte?

Answer 1

Sie benötigen einen Pfeil Funktion nutzen zu können, die lexikalische this verwenden:

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