Twitter bootstrap 3 将ng2引导导入Angular2应用程序的正确方法是什么？

我正试图根据这里的引导示例创建一个响应性应用程序栏-

我删除了大部分代码，并将结果放在JSBin-。当屏幕大小调整为超小时，最右边的选项将折叠为菜单：

单击最右边的按钮可生成：

很好

现在我正试图在Angular 2中做同样的事情。这是普朗克-

css工作正常，但单击按钮没有任何作用-我们需要引导代码。我不知道在哪里插入ng2引导程序。我不需要从它导入任何组件，但是如果它像原始引导一样工作，那么包含它的本质应该使按钮工作

从Angular 2模板（）启动plunker的方法是：

添加应用程序/应用程序栏.component.ts：

import { Component } from '@angular/core';

@Component({
    selector: 'app-bar',
    styles: [`
    .app-bar {
      height: 65px;
      padding: 5px 30px;
      background-color: #00BCD4;
    }
    .logo {
      color: white;
      font-size: 30px;
      font-weight: 300;
      cursor: pointer;
    }
    .link {
      color: white;
      font-size: 24px;
      font-weight: 400;
      cursor: pointer;
    }
  `],
    template: `
<nav class="app-bar navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-bar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="logo navbar-brand" href="#">My&nbsp;App</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="app-bar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="link">Settings</a></li>
        <li><a href="#" class="link">Sign&nbsp;out</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
`
})
export class AppBarComponent {}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序栏”，
风格：[`
.应用程序栏{
高度：65px；
填充：5px30px；
背景色：#00BCD4；
}
.标志{
颜色：白色；
字体大小：30px；
字体大小：300；
光标：指针；
}
.链接{
颜色：白色；
字体大小：24px；
字体大小：400；
光标：指针；
}
`],
模板：`
切换导航




`
})
导出类AppBarComponent{}

将app/app.component.ts更改为

import { Component } from '@angular/core';
import { AppBarComponent } from './app-bar.component';

@Component({
  selector: 'my-app',
  directives: [AppBarComponent],
  template: '<app-bar></app-bar>'
})
export class AppComponent { }

从'@angular/core'导入{Component}；
从“./app bar.component”导入{AppBarComponent}；
@组成部分({
选择器：“我的应用程序”，
指令：[AppBarComponent]，
模板：“”
})
导出类AppComponent{}

将引导css添加到index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

完全清除样式。css

---

---

现在我正在寻找一种导入ng2引导代码的方法。我该怎么做？

好的，下面是一个工作示例：

你必须：

配置SystemJS以加载ng2 boostrap和moment

  //map tells the System loader where to look for things
    var map = {
      'app': 'app',
      .....
      'ng2-bootstrap': 'https://npmcdn.com/ng2-bootstrap@1.0.24',
      'moment': 'https://npmcdn.com/moment',
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {
      main: 'main.ts',
      defaultExtension: 'ts'
    },
    ...
    'ng2-bootstrap': {
      main: 'ng2-bootstrap.js',
      defaultExtension: 'js'
    },
    'moment': {
      main: 'moment.js',
      defaultExtension: 'js'
    }
  };

导入ng2引导指令

从“ng2引导/ng2引导”导入{BUTTON_指令}

这是带有工作切换按钮的组件：

import { Component } from '@angular/core';
import { AppBarComponent } from './app-bar.component';

import {CORE_DIRECTIVES} from '@angular/common';
import {FORM_DIRECTIVES} from '@angular/forms';
import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [AppBarComponent, BUTTON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
  <app-bar></app-bar>
  <button type="button" class="btn btn-primary"
        [(ngModel)]="singleModel" btnCheckbox
        btnCheckboxTrue="1" btnCheckboxFalse="0">
        Single Toggle
  </button>
  singleModel: {{singleModel}}
  `
})
export class AppComponent { }

从'@angular/core'导入{Component}；
从“./app bar.component”导入{AppBarComponent}；
从“@angular/common”导入{CORE_指令}；
从'@angular/forms'导入{FORM_指令}；
从“ng2引导/ng2引导”导入{BUTTON_指令}；
@组成部分({
选择器：“我的应用程序”，
指令：[AppBarComponent、按钮指令、核心指令、表单指令]，
模板：`
单开关
singleModel:{{singleModel}}
`
})
导出类AppComponent{}

好的，下面是一个工作示例：

你必须：

配置SystemJS以加载ng2 boostrap和moment

  //map tells the System loader where to look for things
    var map = {
      'app': 'app',
      .....
      'ng2-bootstrap': 'https://npmcdn.com/ng2-bootstrap@1.0.24',
      'moment': 'https://npmcdn.com/moment',
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {
      main: 'main.ts',
      defaultExtension: 'ts'
    },
    ...
    'ng2-bootstrap': {
      main: 'ng2-bootstrap.js',
      defaultExtension: 'js'
    },
    'moment': {
      main: 'moment.js',
      defaultExtension: 'js'
    }
  };

导入ng2引导指令

从“ng2引导/ng2引导”导入{BUTTON_指令}

这是带有工作切换按钮的组件：

import { Component } from '@angular/core';
import { AppBarComponent } from './app-bar.component';

import {CORE_DIRECTIVES} from '@angular/common';
import {FORM_DIRECTIVES} from '@angular/forms';
import {BUTTON_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [AppBarComponent, BUTTON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
  <app-bar></app-bar>
  <button type="button" class="btn btn-primary"
        [(ngModel)]="singleModel" btnCheckbox
        btnCheckboxTrue="1" btnCheckboxFalse="0">
        Single Toggle
  </button>
  singleModel: {{singleModel}}
  `
})
export class AppComponent { }

从'@angular/core'导入{Component}；
从“./app bar.component”导入{AppBarComponent}；
从“@angular/common”导入{CORE_指令}；
从'@angular/forms'导入{FORM_指令}；
从“ng2引导/ng2引导”导入{BUTTON_指令}；
@组成部分({
选择器：“我的应用程序”，
指令：[AppBarComponent、按钮指令、核心指令、表单指令]，
模板：`
单开关
singleModel:{{singleModel}}
`
})
导出类AppComponent{}

这正是我正在使用的<代码>npm安装ng2引导程序--save安装此引导程序，不安装其他引导程序。这正是我正在使用的引导程序<代码>npm安装ng2引导程序--保存安装此引导程序，而不安装其他引导程序。