angular - 将 ng2-bootstrap 与 Angular2 集成

Question

一直在尝试使用 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});
  }


}

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