Question

我使用Angular 2构建我的Web应用程序。当我尝试在图像或按钮上放置工具提示或弹出窗口时，我得到default-looking tooltip而不是引导程序。

我已经尝试了basic W3Schools examples并完成了所有操作，但它无法正常工作。

我相信我的问题在于正确导入bootstrap.js或jQuery，但其他引导项如按钮等确实可以正常工作。

（我使用nodejs安装必要的文件/依赖项 - ＆gt; 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();
    }
}

！编辑！

添加了用户的建议以及running webpage source的摘录。

Answer 1

您在模板中编写的script标记会被忽略，而是从组件内部运行JS代码，我建议您在ngOnInit()方法中运行它，因为您正在实现{{ 1}} interface。

这应该有效：

OnInit

使用：

@Component({
    selector: 'app',
    template: `

        <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

    `
})
export class AppComponent{
    ngAfterViewInit(){
        $('[data-toggle="tooltip"]').tooltip();
    }
}

<小时/> 具体到您的项目：

您有三种方法可以解决此问题：一种是设置一个令人讨厌的超时，因此它会启动工具提示，直到您从服务器获得响应并且实际呈现它们。第二个是找到一些方法，比如我们尝试的每次dom更改时执行的方法，而不仅仅是第一次。第三个也是最好但更复杂的是通过实现一个在页面开始渲染之前执行的方法，如果你在该方法中返回一个promise，页面将等待Promise在渲染之前完成，所以你可以返回承诺并解决承诺，直到您从服务中得到答案，这样dom将在控制器第一次加载时准备就绪我相信最后一种方法叫做CanActivate或类似的东西。

Bootstrap工具提示/弹出窗口未正确显示

1 个答案: