Question

如何在角度4项目中显示bootstrap-treeview？

我正在开发一个Angular前端，我的第一步是在一个组件中集成一个bootstrap-treeview。

我在angular-cli.json中添加了bootstrap-treeview.min.css，jquery.js和bootstrap-treeview.min.js，然后我将引用的脚本文件和css文件放在assets-directory中。

我已按照this tutorial的说明进行操作。

ng build和ng serve编译没有错误，但树视图在组件中不可见。

当我在浏览器中打开相关的component.html时，树视图是可见的并且可以正常工作。我可以使用子项展开下拉列表并选择一个链接。但是，当我按ng serve启动应用时，该组件为空。

＆＃13;

import { Component, OnInit } from '@angular/core';
declare var jquery: any;
declare var $: any;


@Component({
  selector: 'app-document-tree',
  templateUrl: './document-tree.component.html',
  styleUrls: ['./document-tree.component.css']
})
export class DocumentTreeComponent implements OnInit {
  
  
  ngOnInit() {     
  }  
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> -->
    <link rel="stylesheet" href="../../../assets/bootstrap-treeview.min.css">
</head>
<body>
    <h3>Tree-Component</h3>
    <table border="5px" height="300px" width="200px">
        <tr border="5px">
            <td border="5px">
                <div class="container" border="5px" height="600px" width="200px" >
                    <div id="tree" class="treeview" height="600px" width="200px" >

                    </div>
                </div>
            </td>
        </tr>
    </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> -->
    <script src="../../../assets/bootstrap-treeview.min.js"></script>
    <script>
        var myTree = [
            {
                text: "Parent 1",
                nodes: [
                    {
                        text: "Child 1",
                        nodes: [
                            {
                                text: "Grandchild 1"
                            },
                            {
                                text: "Grandchild 2"
                            }
                        ]
                    },
                    {
                        text: "Child 2"
                    }
                ]
            },
            {
                text: "Parent 2"
            },
            {
                text: "Parent 3"
            },
            {
                text: "Parent 4"
            },
            {
                text: "Parent 5"
            }
        ];

        $('#tree').treeview({ data: myTree });
    </script>
</body>

</html>

＆＃13;

如何在Angular-app中集成bootstrap-treeview？

0 个答案: