將ng2-bootstrap與Angular2集成

已嘗試集成ng2-bootstrap與Angular2 beta.9使用 CDN參考。將ng2-bootstrap與Angular2集成

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


}

來源

2016-03-21 micronyks

事實上，你需要包括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-21 12:00:40

它還沒有工作！ – micronyks

您的應用程序中似乎還有其他問題;-)請參閱：「組件'ParentCmp'的視圖中出現」未定義的指令值未定義「」 –

http://plnkr.co/edit/hHtW6zTH34HxKCgj8Evx?p=preview now I只有一個cmp。我想知道如何從ng2-bootstrap temple'let template = require（'./ alert-demo.html'）;'？ – micronyks

編輯角CLI-build.js文件中像下面

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

編輯的src /系統文件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

來源

2016-07-05 11:14:49

將ng2-bootstrap與Angular2集成

回答

相關問題