angular1 bootstrap不支持angular2

时间:2016-12-14 14:32:57

标签: angular ng-bootstrap

我正在努力将AngularJS应用程序转换为Angular 2应用程序.Bootstrap功能在AngularJS中使用的Angular 2中不起作用。是否有Angular 2 bootstrap的替代方法?

  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">OrangeTestDefaultActivity<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a ng-click="handle_url('Screen_1050')">Label</a></li>
    <li><a ng-click="handle_url('Screen_1100')">Become</a></li>
    </ul>
  </li>

2 个答案:

答案 0 :(得分:3)

通过ng2-bootstrap项目也可以与Angular2集成: https://github.com/valor-software/ng2-bootstrap

要安装它,只需将这些文件放在主HTML页面中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

然后你可以用这种方式将它用于你的组件:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
    selector: 'my-app',
    directives: [Alert],
    template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

答案 1 :(得分:0)

在您的索引html文件中,导入

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">