>我试图以角度方式显示
jquery选项卡.
>所以我创建了一个方法tabsUL(),我试图在警报中显示值,但我没有得到它,
>之后我不知道该怎么办.
>在下面提供我的jquery codepen
>提供下面没有工作的plnkr
>你们能告诉我怎么办吗？
>所以我创建了一个方法tabsUL(),我试图在警报中显示值,但我没有得到它,
>之后我不知道该怎么办.
>在下面提供我的jquery codepen
>提供下面没有工作的plnkr
>你们能告诉我怎么办吗？
工作小提琴https://codepen.io/texirv/pen/Vzdqpo
不工作的小提琴
http://plnkr.co/edit/XMLRIGEJLnxK3Vv9Y8Ma?p=preview
export class App {
constructor() {
this.name = 'Angular2'
}
tabsUL(): void {
//console.log("I am here");
//alert("I am here");
var tab_id = $(this).attr('data-tab');
alert("tab_id------>" + tab_id);
}
}
解决方法
我找到的最简单的方法是通过
this post,它工作正常,有角度方式,易于扩展：
tab.component.ts
import { Component,Input } from '@angular/core';
@Component({
selector: 'tab',styles: [`
.pane{
padding: 1em;
}
`],template: `
<div [hidden]="!active" class="pane">
<ng-content></ng-content>
</div>
`
})
export class TabComponent {
@Input('tabTitle') title: string;
@Input() active = false;
}
tabs.component.ts
import { Component,ContentChildren,QueryList,AfterContentInit } from '@angular/core';
import { TabComponent } from './tab.component';
@Component({
selector: 'tabs',template:`
<ul class="nav nav-pills nav-fill">
<li class="nav-item" *ngFor="let tab of tabs" (click)="selectTab(tab)">
<a class="nav-link" tabindex [class.active]="tab.active">{{tab.title}}</a>
</li>
</ul>
<ng-content></ng-content>
`
})
export class TabsComponent implements AfterContentInit {
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
// contentChildren are set
ngAfterContentInit() {
// get all active tabs
let activeTabs = this.tabs.filter((tab)=>tab.active);
// if there is no active tab set,activate the first
if(activeTabs.length === 0) {
this.selectTab(this.tabs.first);
}
}
selectTab(tab: TabComponent){
// deactivate all tabs
this.tabs.toArray().forEach(tab => tab.active = false);
// activate the tab the user has clicked on.
tab.active = true;
}
}
your.component.html
<tabs #tabs> <tab #foo tabTitle="foo"> tab foo content </tab> <tab #bar tabTitle="bar"> tab bar content </tab> </tabs>
