Question

我是角色2的新手。目前我正面临着在我的应用中加载jQuery的问题。

这是我的示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Jobkeeper</title>
    <meta charset="utf-8">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app/style.css" />
    <link rel="stylesheet" href="app/forms.css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
     <link href="app/assets/frontend/custom/css/owl.carousel.css" rel="stylesheet">
     <link href="app/assets/frontend/custom/css/owl.theme.css" rel="stylesheet">
     <link href="app/assets/frontend/custom/css/owl.transitions.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="app/assets/frontend/custom/css/main.css">
     <link href='https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,900' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300,600italic' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script data-turbolinks-track="true" src="app/assets/frontend/custom/js/bootstrap.min.js"></script>
     <script data-turbolinks-track="true" src="app/assets/frontend/custom/js/jquery.toaster.js"></script>
    <script data-turbolinks-track="true" src="app/assets/frontend/custom/js/jquery.toaster.config.js"></script>    

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    {{ Html::script('core-js/client/shim.min.js') }}
    {{ Html::script('zone.js/dist/zone.js') }}
    {{ Html::script('reflect-metadata/Reflect.js') }}
    {{ Html::script('systemjs/dist/system.src.js') }}
    {{ Html::script('systemjs.config.js') }}

    <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<my-app></my-app>

<script src="app/assets/frontend/custom/js/owl.carousel.js"></script>

<script>
    $(document).ready(function() {

        var owl = $("#owl-demo");

        owl.owlCarousel({

            // Define custom and unlimited items depending from the width
            // If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
            // For better preview, order the arrays by screen size, but it's not mandatory
            // Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
            // In the example there is dimension with 0 with which cover screens between 0 and 450px

            itemsCustom: [
                [0, 1],
                [450, 1],
                [600, 2],
                [700, 2],
                [1000, 3],
                [1200, 4],
                [1400, 6],
                [1600, 6]
            ],
            navigation: true

        });
    });
</script>

</body>

当我加载/刷新页面时，owl carowsel没有初始化，因为jQuery没有在那个时候加载。

我做了一些可能的解决方案： -

我已经将jquery（owl carowsel代码）放在了有角度的页脚指令中。

Aslo我已经在app.module.ts中导入了jquery文件，但它无法正常工作。

那么它是如何工作的。请告诉我。

角度2中的jquery加载问题

0 个答案: