2

CDN参照ng2-bootstrapをAngular2 beta.9使用 して統合しようとしています。

非稼働プランカー

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});
  }


}
4

2 に答える 2

2

実際には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。

于 2016-03-21T12:00:40.590 に答える
0

以下のように 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 フォルダーにファイルが作成され、完了です。コードにエラーが見つかった場合は、サーバーを再起動してみてください。必要なのはそれだけですが、もっと興味がある場合は、ここに記事を書きました

于 2016-07-05T11:14:49.067 に答える