Angular2：在一个组件上有多个输出

Question

我目前正在尝试在 Angular2 中创建一个组件，但正在尝试使用多个输出来实现它。我有一个父组件和一个导航栏组件

父组件：

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

导航栏组件：

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

我简化了文件，使其看起来更清晰。我想要做的是通过点击导航栏的不同部分触发导航栏的两个可能输出。一个是更改选项卡操作，另一个是注销操作。所以我试着在父组件中写下导航栏组件应该有两个不同的输出，我在父组件中用两种不同的方法处理它们（unlogSuccess 和 changingTab 方法）。

我还在导航栏组件中使用 @Output 装饰器创建了两个输出。然后，在模板的不同部分，我触发了导航栏 class 的不同功能，这些功能将事件发送到我创建的两个不同的输出。

我编译的时候没有问题。但是，当我尝试触发我创建的第二个输出时，它说 '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");
        }
    });
}

Angular2：在一个组件上有多个输出

Angular2 : having multiple output on a component

angular2-template

angular