Bootstrap工具提示/popup窗口不能正常显示
我正在使用Angular 2来构build我的Web应用程序。 当我尝试在图像或button上放置工具提示或popup窗口时，我会看到默认的工具提示，而不是引导工具提示 。
我已经尝试了基本的W3Schools例子，并且做了所有的事情，但是它不起作用。
我相信我的问题在于bootstrap.js或jQuery的正确导入，但是像button等其他引导项目可以正常工作。
（我使用nodejs来安装必要的文件/依赖关系 – > npm install npm install bootstrap npm install jquery ）
的index.html
<html> <head> <base href="/"><!--Without this tag, the browser may not be be able to load resources (images, css, scripts) when "deep linking" into the app. Bad things could happen when someone pastes an application link into the browser's address bar or clicks such a link in an email link. --> <title>Factory</title> <link type="text/css" rel="stylesheet" href="/css/styles.css"> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/router.dev.js"></script> <script src="/node_modules/angular2/bundles/http.dev.js"></script> <!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>--> <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>--> <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />--> <!-- stackoverflow suggested settings --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console)); </script> </head> <body> <my-app></my-app> </body> </html>
页面与-提示（.TS）
import {Component} from "angular2/core"; import ... from ...; import ... from ...; ... @Component({ template: ` <div *ngIf="hall" class="container"> <h2>Detail van hal <small>{{hall.name}}</small></h2> <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> <div class="container"> <div class="hall-box-single"> <div class="hall-box" [style.width]="hall.areaWidth*4" [style.height]="hall.areaHeight*4"> <div class="image-container"> <div *ngFor="#item of hall.items"> <a data-toggle="tooltip" title="Popover title"> <img [src]="item.image" [style.left]="item.posX" [style.top]="item.posY"/> </a> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> `}) export class HallDetailComponent implements OnInit { ... constructor(...) { ... } ngOnInit() { ... (<any>$('[data-toggle="tooltip"]')).tooltip(); $('[data-toggle="tooltip"]').tooltip(); } }
！编辑！
增加了来自用户的build议以及正在运行的网页源的摘录。
您在模板中写入的script标记被忽略，而是从组件内部运行您的JS代码，因为您正在实现OnInit接口，所以我build议您在ngOnInit()方法中运行它。
这应该工作：
@Component({ selector: 'app', template: ` <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> ` }) export class AppComponent{ ngAfterViewInit(){ $('[data-toggle="tooltip"]').tooltip(); } }
使用：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
对于您的项目特别如此：
你有三个选项来解决它：一个是设置一个讨厌的超时，所以它启动工具提示，直到你从服务器得到一个响应，他们已经实际渲染。 其次是find一些像我们尝试的方法，每次更改都会被执行，而不仅仅是第一次。 第三个也是最好的，但更复杂一点是实现一个方法，在页面开始渲染之前执行，如果在该方法中返回一个promise，页面将等待Promise在渲染之前完成，所以你可以返回一个承诺，并解决承诺，直到你从服务的答案，这样的dom将准备第一次控制器加载我相信最后一个方法被称为CanActivate或类似的东西。
- 使用npm angular2导入库
- “angular-bootstrap-md \ index.ts不是编译输出的一部分”
- Angular 4 CanActivate guard不会加载与服务一起使用的组件; 简单的Observable.of（true）作品
- 不能使用var HtmlReporter = require（'protractor-html-screenshot-reporter'）
- 发布操作不适用于Angular 4
- 不能使用Cli安装Angular2应用程序
- angular4 – 所有路线不工作
- 如何进行时间跟踪节点/mongoose/angular？
- 量angular器吞咽运行一个单一的spec文件