Question

我试图将adminlte模板包含在我的角度项目中2.我将adminlte文件夹放在node_modules内，但在链接.js和{{1在角.css中，它找不到它们，我不知道为什么会这样。有人可以就这个话题向我提出建议吗？

附加代码和错误：

Answer 1

答案不会那么容易。

根据AdminLTE网站＆＃34; https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html＆＃34;

是否有针对PHP框架的集成指南，例如Yii或Symfony？

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

所以你可以检查一下

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

但我认为你可以添加＆＃34; bootstrap，dist，packages＆＃34;内部＆＃34;资产＆＃34;如果您使用角度CLI

，则项目中的文件夹

Answer 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添加到角度项目中，请参阅以下链接： https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components

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

Answer 3

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

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

Answer 4

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

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"
]

从仪表板向您的身体添加一个身体类别。

对于仪表板2，可能是：

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

创建一个新组件并将仪表板主体从索引复制到模板
将图像复制到资产文件夹-从\assets

\node_modules\admin-lte\dist\img

用src="assets/<image-name>"

我对下一步整合的描述。我不能保证这些是最好的解决方案，也许会有更好的解决方案。当我将路由添加到管理面板时，遇到以下问题：

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

解决方案：
- 将Renderer2导入到管理面板组件。
- 在OnInit管理面板挂钩中，使用以下命令添加了这些类：
```
Renderer2.addClass (...)
```
- 在ngOnDestroy管理面板挂钩中，使用以下命令删除了这些类：
```
Renderer2.removeClass(...)
```
路由后，js动画停止工作。

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

在Angular2项目中包含adminLTE

4 个答案: