Javascript 引导工具提示/弹出框未正确显示_Javascript_Node.js_Twitter Bootstrap 3_Tooltip_Angular

Javascript 引导工具提示/弹出框未正确显示

javascript node.js twitter-bootstrap-3 angular

Javascript 引导工具提示/弹出框未正确显示,javascript,node.js,twitter-bootstrap-3,tooltip,angular,Javascript,Node.js,Twitter Bootstrap 3,Tooltip,Angular,我正在使用Angular 2构建我的web应用程序。当我尝试在图像或按钮上放置工具提示或弹出框时，我得到的是一个而不是引导的我已经试过了，并且做了所有显示的事情，但是它不起作用我相信我的问题在于bootstrap.js或jQuery的正确导入，但其他引导项（如按钮等）可以正常工作（我使用nodejs安装必要的文件/依赖项->npm installnpm install bootstrapnpm install jquery） index.html <html> <head

我正在使用Angular 2构建我的web应用程序。当我尝试在图像或按钮上放置工具提示或弹出框时，我得到的是一个而不是引导的

我已经试过了，并且做了所有显示的事情，但是它不起作用

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

（我使用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>


工厂
System.config({
套餐：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（'app/boot'）
.then（null，console.error.bind（console））；

带有工具提示的页面（.ts）

从“angular2/core”导入{Component}；
导入。。。从…起
导入。。。从…起
...
@组成部分({
模板：`
范哈尔{{hall.name}详图
.
您在模板中编写的脚本
标记将被忽略，请从组件内部运行JS代码，我建议您在ngOnInit（）
方法中运行它，因为您正在实现OnInit
接口
这应该起作用：
@Component({
    selector: 'app',
    template: `

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

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

@组件({
选择器：“应用程序”，
模板：`
`
})
导出类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>




因此针对您的项目：
您有三个选项可以修复它：
一种是设置一个严重的超时，这样它会启动工具提示，直到您从服务器得到响应并且它们实际呈现为止。
第二种方法是找到一些类似于我们尝试的方法，这些方法在每次dom更改时执行，而不仅仅是第一次。
第三个也是最好的，但有点复杂的是，实现一个在页面开始呈现之前执行的方法，如果您在该方法中返回承诺，页面将在呈现之前等待该承诺完成，因此您可以返回承诺并解决该承诺，直到您从服务获得答案，这样dom w我会在控制器第一次加载时准备好
我相信最后一个方法叫做CanActivate或类似的东西。
你在模板中编写的脚本标记被忽略了，请从组件内部运行JS代码，我建议你在ngOnInit（）
方法中运行它，因为你正在实现OnInit
接口
这应该起作用：
@Component({
    selector: 'app',
    template: `

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

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

@组件({
选择器：“应用程序”，
模板：`
`
})
导出类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>




因此针对您的项目：
您有三个选项可以修复它：
一种是设置一个严重的超时，这样它会启动工具提示，直到您从服务器得到响应并且它们实际呈现为止。
第二种方法是找到一些类似于我们尝试的方法，这些方法在每次dom更改时执行，而不仅仅是第一次。
第三个也是最好的，但有点复杂的是，实现一个在页面开始呈现之前执行的方法，如果您在该方法中返回承诺，页面将在呈现之前等待该承诺完成，因此您可以返回承诺并解决该承诺，直到您从服务获得答案，这样dom w我会在控制器第一次加载时准备好
我相信最后一个方法叫做CanActivate或类似的东西。
我想你缺少了一个$（'[data toggle=“tooltip”]'）。tooltip（）；
在你的..
中。有关详细信息，请参阅。@Adilapapapaya我以前试过，但tooltip和pover都不能正常工作。在第二个代码摘录中，你可以在底部看到$（'[data toggle=“popover”]”。popover（）；
如果使用类似或不使用jquery的组件，效果会更好。我认为您缺少了一个$（“[data toggle=“tooltip”]”）。tooltip（）；
在您的…
中。有关详细信息，请参阅。@adilapapaya我以前尝试过，但工具提示和popover都不能正常工作。在第二个代码摘录中，您可以在底部看到$（'[data toggle=“popover”]'）。popover（）；
如果您使用类似或不使用jquery的组件会更好如何从组件内部运行JS代码？以前从未做过或看过。在回答文章中添加了示例。您使用的是什么版本的引导？控制台中是否有错误？（点击F12>控制台，选项卡查看）我刚刚尝试了一下，效果很好，在js代码和html中都更改了工具提示的popover，并去掉了所有相互覆盖的库链接，您正在用3.3.5覆盖3.3.6:
，与jquery和“tooltip.js”相同已经是bootstrap.min.JS的一部分。如何从组件内部运行JS代码？以前从未执行过或见过。在回答文章中添加了示例。您使用的是什么版本的bootstrap？控制台中是否有错误？（点击F12>控制台，选项卡查看）我刚刚尝试了一下，效果很好，在js代码和html中都更改了工具提示的popover，并且去掉了所有相互覆盖的库链接，您正在用3.3.5覆盖3.3.6:
，与jquery相同，“tooltip.js”已经是bootstrap.min.js的一部分