Question

我正在尝试根据此处的bootstrap示例创建一个响应式应用程序栏 - http://getbootstrap.com/components/#navbar

我删除了大部分代码并将结果放在JSBin - http://jsbin.com/juvalaj/edit?html,output上。当屏幕调整为超小时，最右边的选项会折叠到菜单中：

点击最右边的按钮会产生：

尼斯。

现在我试图在Angular 2中做同样的事情。这是plunker - http://plnkr.co/edit/doDyRQSV6aBqZ0KLgGnz

css工作正常，但点击按钮什么都不做 - 我们需要引导代码。我很困惑在哪里插上ng2-bootstrap。我不需要从中导入任何组件，但如果它像原始引导程序那样工作，那么只需包含它就可以使按钮工作。

通过以下方式从角鲨2模板（http://plnkr.co/edit/nl0F7N?p=preview）开始使用该掠夺者：

添加app / app-bar.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 {}

将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 { }

将bootstrap 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">

完全清除styles.css

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

Answer 1

好的，这是一个有效的例子：http://embed.plnkr.co/k9s1LnJU5cVy18yid7Va/

你必须：

配置SystemJS以加载ng2-boostrap和时刻

  //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-bootstrap指令

从'ng2-bootstrap / ng2-bootstrap'导入{BUTTON_DIRECTIVES};

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

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 { }

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

1 个答案: