1

我试图将adminlte模板包含在我的 angular 项目 2 中。我将adminlte文件夹放在里面node_modules，但是在 angular 中链接.jsand时，它没有找到它们，我不知道为什么。有人可以就这个话题给我建议吗？.cssindex.html

附上代码和错误：

参考

错误

4

4 回答 4

1

我在 github 中找到了 AdminLTE 的 Angular 2 端口。你可能想看看这个：

https://github.com/csotomon/Angular2-AdminLTE

于 2017-08-23T20:36:38.960 回答
1

答案不会那么容易。

根据 AdminLTE 网站“ https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html ”

是否有适用于 Yii 或 Symfony 等 PHP 框架的集成指南？

简短的回答，不。但是，网络上有一些分支和教程提供了有关如何与许多不同框架集成的信息。甚至还有与 jQuery ajax、AngularJS 和/或 MVC5 ASP .NET 集成的 AdminLTE 版本。

所以你可以检查一下

但我认为如果您使用 angular CLI，您可以在项目的“assets”文件夹中添加“bootstrap、dist、packages”

于 2017-04-11T22:26:27.017 回答
1

我假设通过包含模板意味着在您的应用程序中使用 AdminLTE.css 文件。

为此，您需要在您的 component.ts 文件中导入 .css 文件，如下所示：

@Component({
  moduleId: module.id,
  selector: 'dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['bower_components/adminLTE/dist/css/AdminLTE.min.css']
})

PS：确保路径有效

指定 styleUrl 后，我们将能够访问 Admin LTE 的 CSS 选择器或 dashboard.component.html 文件中的任何其他模板。

有几种方法可以将 CSS 添加到您的 Angular 项目中，请参阅以下链接： https ://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

一个有趣的方法是通过 angular-cli 添加如下 git hub 链接 https://github.com/ahmadalibaloch/Angular-AdminLTE

于 2017-07-22T07:03:15.303 回答
0

多亏了 codingFriday 上的视频，我才能够将 AdminLte 集成到我的 Angular 项目中。我还能够添加路由，现在我有了网站的主页和带有动画的管理页面。我是网络编程新手，我的项目有很多糟糕的解决方案（这是我大学的课程），但也许这会帮助某人入门。

https://github.com/paulrozhkin/tamagotchi-web-client

简而言之，应该采取以下步骤（步骤来源是github上的guide by codingFriday）：

  1. 在您的项目中安装 admin lte 3：

    npm install admin-lte@^3.0 --save

  2. 选择仪表板并将所有链接样式和脚本从仪表板复制到 angular.json：

    例如，这是仪表板 2 的更新 angular.json 文件。

    "styles": [
  ...
  "node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css",
  "node_modules/admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css",
  "node_modules/admin-lte/docs_html/assets/css/adminlte.css"
],
"scripts": [
  ...
  "node_modules/admin-lte/plugins/jquery/jquery.js",
  "node_modules/admin-lte/plugins/bootstrap/js/bootstrap.bundle.js",
  "node_modules/admin-lte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.js",
   "node_modules/admin-lte/dist/js/adminlte.js",
  "node_modules/admin-lte/dist/js/demo.js",
  "node_modules/admin-lte/plugins/jquery-mousewheel/jquery.mousewheel.js",
  "node_modules/admin-lte/plugins/raphael/raphael.js",
  "node_modules/admin-lte/plugins/jquery-mapael/jquery.mapael.js",
  "node_modules/admin-lte/plugins/jquery-mapael/maps/usa_states.js",
  "node_modules/admin-lte/plugins/chart.js/Chart.js",
  "node_modules/admin-lte/dist/js/pages/dashboard2.js"
]

  3. 将仪表板中的身体类别添加到您的身体。

    对于仪表板 2，这可能是：

    <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">

  4. 创建一个新组件并将仪表板正文从索引复制到模板

  5. 将图像复制到资产文件夹 -\assets从\node_modules\admin-lte\dist\img

  6. 将路径图像替换为src="assets/<image-name>"

我对集成的后续步骤的描述。我不能保证这些是最好的解决方案，并且可能会有更好的解决方案。当我将路由添加到管理面板时，我遇到了以下问题：

  1. body 类不应该应用于其余部分，除了管理面板。

    解决方案：

    • 导入Renderer2到管理面板组件。

    • 在OnInit管理面板挂钩中，这些类是使用以下命令添加的：

      Renderer2.addClass (...)

    • 在ngOnDestroy管理面板挂钩中，这些类使用以下方法删除：

      Renderer2.removeClass(...)

  2. 路由后，js动画停止工作。

    解决方案：

    • 复制adminlte.js到资产（也在 angular.json 中更改路径）并替换：

      $(window).on('load', function ()

      至

      $( document ).ready(function()

    • 另外，如果要在路由后启动仪表盘动画（设置地图、图表数据），必须从仪表盘面板后面的代码启动。

于 2020-05-08T13:53:50.947 回答