Question

我在添加bootstrap到angular2项目时遇到了一些麻烦。

正如https://valor-software.com/ng2-bootstrap/所述，npm install --save ng2-bootstrap已将ng-bootstrap安装到node-modules目录（moment包含在同一目录中）。

添加

import {Component, ChangeDetectionStrategy} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {TAB_DIRECTIVES} from '@ng2-bootstrap';

导致以下错误error TS2307: Cannot find module '@ng2-bootstrap'. 还更改了从'../../../ng2-bootstrap'到'@ng2-bootstrap'的路径。

两者都不起作用。任何想法如何解决它？

Answer 1

运行npm install --save ng2-bootstrap后，您需要按照以下步骤操作 -

在Systemjs.config.js中，像这样配置ng2-bootstrap -

  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ng2-bootstrap':              'node_modules/ng2-bootstrap'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension:'js'}
  };

在index.html中添加这些

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

在您的组件中，您可以像这样使用 -

import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

示例实施：

import { Component } from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
   directives: [TAB_DIRECTIVES, CORE_DIRECTIVES],
  template: `<h1>My First Angular 2 App with ng2-bootstrap</h1>

    <tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)">
      {{tabz?.content}}
    </tab>
  </tabset>

  `
})
export class AppComponent {
    public tabs:Array<any> = [
    {title: 'Dynamic Title 1', content: 'Dynamic content 1'},
    {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},
    {title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}
  ];
 }

注意：最新的ng2-bootstrap版本与angular2 RC4版本兼容。

看看这是否有帮助。

Answer 2

更新：这是一篇关于如何使用ng-cli将bootstraps最新版本4 Alpha实现到角度项目中的有趣文章。 https://angularjs.de/artikel/angular2-bootstrap-scss-angular-cli

Angular2 ng2-bootstrap

2 个答案: