javascript - 使用 Angular 2 实现选项卡

Question

• 我正在尝试以 Angular 方式显示 jquery 选项卡。
• 所以我创建了一个方法 tabsUL()，我试图在其中显示警报中的值，但我没有得到它，
• 之后我不确定如何继续。
• 在下面提供我的 jquery codepen
• 还在下面提供 plnkr，但它不起作用

• 你们能告诉我如何进行吗

  工作 fiddle https://codepen.io/texirv/pen/Vzdqpo

  不工作 fiddle 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

我找到的最简单的方法是通过 this post它工作正常并且有 Angular 并且易于扩展:

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>