将管理员纳入Angular2项目

我试图在我的angular project 2中包含

adminlte

模板。我把

adminlte

文件夹放在

node\u modules

中，但是在angular

index.html

中链接

.js

和

.css

时，它找不到它们，我也不知道原因。有人能就这个话题给我提些建议吗

附加代码和错误：

---

答案不是那么简单

根据AdminLTE网站“

是否有针对诸如Yii或Symfony之类的PHP框架的集成指南

简短的回答是否定的。然而，在这个网站上有很多叉子和教程 提供有关如何与多个不同应用程序集成的信息的web 框架。甚至还有集成的AdminLTE版本 使用jQueryAjax、AngularJS和/或MVC5ASP.NET

所以你可以检查一下

---

但是，如果您使用angular CLI，我认为您可以在项目中的“资产”文件夹中添加“bootstrap、dist、packages”，我假设通过在应用程序中包含模板意味着使用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 cli添加，如下面的git hub链接

---

我在github中找到一个角度为2的AdminLTE端口。您可能想看看这个：

---

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

简言之，应采取以下步骤（步骤的来源是：

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

npm安装管理lte@^3.0--保存

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

例如，这是dashboard 2的更新angular.json文件

“样式”：[
...
“node_modules/admin lte/plugins/fontawesome free/css/all.min.css”，
“node_modules/admin lte/plugins/overlyscrollbars/css/overlyscrollbars.min.css”，
“节点\模块/admin lte/docs\ html/assets/css/adminlte.css”
],
“脚本”：[
...
“node_modules/admin lte/plugins/jquery/jquery.js”，
“node_modules/admin lte/plugins/bootstrap/js/bootstrap.bundle.js”，
“node_modules/admin lte/plugins/overlyscrollbars/js/jquery.overlyscrollbars.js”，
“node_modules/admin lte/dist/js/adminlte.js”，
“node_modules/admin lte/dist/js/demo.js”，
“node_modules/admin lte/plugins/jquery mouseweel/jquery.mouseweel.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，这可能是：

创建新组件并将仪表板主体从索引复制到模板

将图像从

\node\u modules\admin lte\dist\img

将路径图像替换为

src=“assets/”

---

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

body类不应应用于除admin面板之外的其他类

解决方案：

• 将渲染器2导入管理面板组件

• 在

  OnInit

  admin面板挂钩中，使用以下方法添加这些类：

  renderr2.addClass（…）
  

• 在

  ngondestory

  admin面板挂钩中，使用以下方法删除这些类：

  render2.removeClass（…）
  

路由后，js动画停止工作

解决方案：

• 将

  adminlte.js

  复制到资产（同时更改angular.json中的路径）并替换：

  $（窗口）.on（'load'，函数（）
  

  到

  $（文档）.ready（函数（）
  

• 此外，如果要在布线后启动仪表板动画（设置地图、图表数据），则必须从仪表板面板上的“代码隐藏”开始