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

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和changingTab方法）。

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

编译时没问题。然而，当我尝试触发我创建的第二个输出时，它表示＆＃39; this.changedTab＆＃39;未定义。它完全适用于我首先创建的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：在组件上具有多个输出

1 个答案: