你们可以告诉我如何进行使用角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