Question

我试图以角度方式显示jquery标签。
所以我创建了一个方法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);
    }
  }

Answer 1

我使用标签来编辑这样的数据：

那是你要找的那种标签吗？（在plunker他们只是列出项目？）

如果是这样，我使用路由实现了这一点。每个选项卡都是一个单独的组件，带有单独的模板然后，当用户单击选项卡时，我在它们之间进行路由。

此处显示选项卡的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-Final文件夹中。

Answer 2

有三种方法可以实现这一目标。

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

Answer 3

我在这里为你创建了一个简单，语义，工作的版本：

http://plnkr.co/edit/xIj0z7Xl7cI3nEF0yIJM?p=preview

您的代码存在的主要问题是，您在单击选项卡时没有传递$event而您没有css将HTML显示为选项卡

有关在angular2中使用$ event对象的更多信息，请参阅https://angular.io/guide/user-input#get-user-input-from-the-event-object

更新：这是一个类似的解决方案，采用编程方法更改活动标签http://plnkr.co/edit/wflXtbu8d7vvU4puH8hc?p=preview

Answer 4

我找到的最简单的方法是通过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>

使用角度2实现标签

4 个答案: