2

我正在研究 angular2 i，我必须将标签用于 ui。为此，我尝试使用插件http://valor-software.github.io/ng2-bootstrap/

我写了一个 demoComponent 作为

    import { Component, View, Inject} from 'angular2/core';
    import { CORE_DIRECTIVES } from 'angular2/common';
    import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

    // webpack html imports
    let template = require('./tabs-demo.html');

    @Component({
      selector: 'tabs-demo',
      template: template,
      directives: [TAB_DIRECTIVES, CORE_DIRECTIVES]
    })
    export class TabsDemo {
      private tabs:Array<any> = [
        {title: 'Dynamic Title 1', content: 'Dynamic content 1'},
        {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
      ];

      private alertMe() {
        setTimeout(function () {
          alert('You\'ve selected the alert tab!');
        });
      };
    }

这是我的模板

<div (click)="$event.preventDefault()">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[0].active = true">Select second tab</button>
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].active = true">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />
  <tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="#tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled">

    </tab>
    <tab (select)="alertMe()">
      <template tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </template>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>

  <hr />

  <tabset [vertical]="true" type="pills">
    <tab heading="Vertical 1">Vertical content 1</tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
  </tabset>

  <hr />

  <p><i>Bootstrap 4 doesn't have justified classes</i></p>
  <tabset [justified]="true">
    <tab heading="Justified">Justified content</tab>
    <tab heading="SJ">Short Labeled Justified content</tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
</div>

但是当 gulp 编译它时它会给出错误

在此处输入图像描述

请纠正我以正确运行它。

4

1 回答 1

1

好像TAB_DIRECTIVES改名为TAB_COMPONENTS. 我尝试了 ng2-bootstrap 的 0.53 版。

这是我在index.html文件中使用的关于 SystemJS 的配置：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-bootstrap': {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-bootstrap': 'node_modules/ng2-bootstrap'
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

希望它可以帮助你，蒂埃里

于 2016-01-15T10:35:42.140 回答