在 Angular2 项目中包含 adminLTE答案

【问题标题】：Include adminLTE in Angular2 project在 Angular2 项目中包含 adminLTE
【发布时间】：2017-04-07 19:19:44
【问题描述】：

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

附上代码和错误：

Reference

Error

【问题讨论】：

标签： angular templates adminlte

【解决方案1】：

答案不会那么容易。

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

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

简短的回答，不。但是，周围有叉子和教程提供有关如何与许多不同的集成的信息的网络构架。甚至还有集成的 AdminLTE 版本使用 jQuery ajax、AngularJS 和/或 MVC5 ASP .NET。

所以你可以检查一下

https://www.npmjs.com/package/ng2-admin-lte

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

【讨论】：

【解决方案2】：

我认为包含模板意味着在您的应用程序中使用 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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

在您的项目中安装 admin lte 3：
```
npm install admin-lte@^3.0 --save
```

选择仪表板并将所有链接样式和脚本从仪表板复制到 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"
]

将仪表板中的 body 类添加到您的 body。

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

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

创建一个新组件并将仪表板正文从索引复制到模板
将图像复制到资产文件夹 - 从\node_modules\admin-lte\dist\img 复制到\assets
用src="assets/<image-name>"替换路径图片

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

body 类不应应用到其余部分，管理面板除外。

解决方案：
- 将Renderer2 导入到管理面板组件。
- 在OnInit admin-panel 钩子中，这些类是通过以下方式添加的：
```
Renderer2.addClass (...)
```
- 在ngOnDestroy admin-panel 钩子中，这些类被删除：
```
Renderer2.removeClass(...)
```
路由后，js动画停止工作。

解决方案：
- 将adminlte.js 复制到资产（同时更改angular.json 中的路径）并替换：
```
$(window).on('load', function ()
```
  到
```
$( document ).ready(function()
```
- 另外，如果要在路由后启动仪表盘动画（设置地图、图表数据），必须从仪表盘面板后面的代码启动。

【讨论】：