Question

我正在使用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编译它时会给出错误

请纠正我正确运行。

Answer 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>

希望它可以帮到你，亨利

ng2-bootsrap没有导出成员'TAB_DIRECTIVES'

1 个答案: