将 ng2-bootstrap 与 Angular2 集成答案

【问题标题】：Integrate ng2-bootstrap with Angular2将 ng2-bootstrap 与 Angular2 集成
【发布时间】：2016-07-05 19:14:49
【问题描述】：

一直在尝试使用 ng2-bootstrap 与 Angular2 beta.9 集成 CDN 参考。

Non working plunker

index.html

 <script>
       System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {
          'src': {defaultExtension: 'ts'},
          'ng2-material': { defaultExtension: 'js' },
          'ng2-bootstrap':{defaultExtension: 'js'}
        },
        map: {
                'ng2-material': 'https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material',
                'ng2-bootstrap':'https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/1.0.7/ng2-bootstrap'
            }
      });

      System.import('src/boot.ts')
            .then(null, console.error.bind(console));
    </script>

boot.ts

...

import { Alert } from 'ng2-bootstrap';

//let template = require('./alert-demo.html');  <---------what about this?

@Component({
selector: 'my-app', 
  template: `
 <alert *ngFor="#alert of alerts;#i = index" [type]="alert.type" dismissible="true" (close)="closeAlert(i)">
  {{ alert?.msg }}
</alert>

<alert dismissOnTimeout="3000">This alert will dismiss in 3s</alert>

<button type="button" class='btn btn-primary' (click)="addAlert()">Add Alert</butto

   `,
  directives: [childcmp,Alert],

})

export class ParentCmp {

  alerts:Array<Object> = [
    {
      type: 'danger',
      msg: 'Oh snap! Change a few things up and try submitting again.'
    },
    {
      type: 'success',
      msg: 'Well done! You successfully read this important alert message.',
      closable: true
    }
  ];

  constructor(public authService: AuthService){

  }


  closeAlert(i:number) {
    this.alerts.splice(i, 1);
  }

  addAlert() {
    this.alerts.push({msg: 'Another alert!', type: 'warning', closable: true});
  }


}

【问题讨论】：

标签： angular ng2-bootstrap

【解决方案1】：

事实上，您需要将ng2-bootstrap.js 包含到脚本元素中并将其从您的 SYStemJS 配置中删除。

<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {
      'src': {defaultExtension: 'ts'},
      'ng2-material': { defaultExtension: 'js' }
    },
    map: {
      'ng2-material': 'https://cdn.rawgit.com/justindujardin/ng2-material/gh-pages/v/0.2.5/ng2-material',
    }
  });

  (...)
<script>

问题在于您尝试导入 Alert 组件的方式：

import { Alert } from 'ng2-bootstrap/components/alert';

看到这个 plunkr：http://plnkr.co/edit/YbONWFhPY0IUkXzYo54u?p=preview。

【讨论】：

您的应用程序中似乎还有其他问题；-) 请参阅：“组件'ParentCmp'的视图上的意外指令值'undefined'”
plnkr.co/edit/hHtW6zTH34HxKCgj8Evx?p=preview 现在我只有一个 cmp。我想知道如何从 ng2-bootstrap Temple let template = require('./alert-demo.html'); 获得参考？？
知道了。问题是您导入 Alert 组件的方式...我更新了我的答案。

【解决方案2】：

如下编辑 angular-cli-build.js 文件

vendorNpmFiles: [ 'ng2-bootstrap/**/*', 'moment/moment.js' ]

如下编辑 src/system-config.ts 文件

const map: any = {
     'moment': 'vendor/moment/moment.js',
     'ng2-bootstrap': 'vendor/ng2-bootstrap'
};


/** User packages configuration. */
 const packages: any = {
 'ng2-bootstrap': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'ng2-bootstrap.js'
 },
 'moment':{
   format: 'cjs'
 }
};

现在我们差不多完成了。

ng build

以上步骤将在 dist/vendor 文件夹中创建文件，我们就完成了。如果您在代码中发现错误，请尝试重新启动服务器。这就是你所需要的，但如果你更感兴趣，我写了一篇文章here

【讨论】：