你們可以告訴我如何進行使用角2實現標籤
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>
我使用的數據編輯的標籤是這樣的：
是的那種標籤的你正在尋找？ （在掠奪者，他們只是列表項？）
如果是這樣，我使用路由實現了這一點。每個選項卡都是一個獨立的組件，具有獨立的模板然後，當用戶點擊標籤時，我會在它們之間路由。
這裏顯示選項卡的HTML包括用於路由的路由器插座。
<div class="panel-body">
<div class="wizard">
<a [routerLink]="['info']" routerLinkActive="active">
Basic Information <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
!isValid('info')}"></span>
</a>
<a [routerLink]="['tags']" routerLinkActive="active">
Search Tags <span [ngClass]="{'glyphicon glyphicon-exclamation-sign':
!isValid('tags')}"></span>
</a>
</div>
<router-outlet></router-outlet>
</div>
您可以在這裏找到完整的示例：https://github.com/DeborahK/Angular-Routing在APM-最終文件夾。
，你可以在我的小提琴更新其混淆:( –
你熟悉路由嗎？路由是一種重要的架構方法。也許你正在尋找更小的解決方案？ – DeborahK
我創建了一個簡單的，語義，工作版本爲您在這裏：
http://plnkr.co/edit/xIj0z7Xl7cI3nEF0yIJM?p=preview
與您的代碼的主要問題是，一個選項卡上單擊當你不及格$event和你沒有CSS顯示HTML作爲標籤
欲瞭解更多有關在angular2使用$事件對象看https://angular.io/guide/user-input#get-user-input-from-the-event-object
更新： 這是一個類似的解決方案，通過編程方式更改活動標籤http://plnkr.co/edit/wflXtbu8d7vvU4puH8hc?p=preview
你能告訴我什麼是$事件的使用，我已經看到他們傳遞$事件的許多地方以及爲什麼我們應該傳遞$事件......如果你解釋這樣，將來會很棒樂於助人？ –
$ event將事件對象（https://www.w3schools.com/jsref/dom_obj_event.asp）傳遞到您的代碼中。你可以訪問觸發事件的目標元素，在這種情況下，一個標籤鏈接 – itodd
偉大的抓人，好+1 –
有三種方法可以實現此目的。
1 - 要做到這一點是與使用引導選項卡上的最簡單的方法：Bootstrap docs
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1" (click)="DoSomeActionForTab1()">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" (click)="DoSomeActionForTab2()">tab2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab2</h3>
<p>Some content in menu 1.</p>
</div>
</div>
1 - 你可以通過名爲路由器網點做到這一點，這是稍微更先進：Docs
HTML
<div class="panel-body">
<div class="wizard">
<a [routerLink]="[{ outlets: { tabs: ['tab1'] } }]" routerLinkActive="active">Tab1</a>
<a [routerLink]="[{ outlets: { tabs: ['tab2'] } }]" routerLinkActive="active">Tab2</a>
</div>
<router-outlet name="tabs"></router-outlet>
</div>
路由模塊
{
path: 'tab1',
component: Tab1Component,
outlet: 'tabs'
},
{
path: 'tab2',
component: Tab2Component,
outlet: 'tabs'
}
3 - 還有一個NPM包專爲標籤：npm package
我想你應該嘗試NGX-引導標籤 – n8coder