javascript – 使用角度2实现标签

>我试图以角度方式显示 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);
    }
  }

解决方法

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

原文地址：https://www.jb51.cc/js/158112.html