Включить adminLTE в проект Angular2

Я пытался включить adminlte шаблон в моем угловом проекте 2. Я поместил adminlte папка внутри node_modules, но при связывании .js а также .css в угловом index.html, он не находит их, и я не знаю, почему причина. Может кто-нибудь предложить мне совет на эту тему?

Прикрепите код и ошибку:

Ссылка

ошибка

Источник

3 ответа

Я нашел Angular 2 порт AdminLTE в github. Вы можете взглянуть на это:

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

Источник

Ответ не будет работать так просто.

согласно веб-сайту AdminLTE " https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html"

Существует ли руководство по интеграции с PHP-фреймворками, такими как Yii или Symfony?

Короткий ответ, нет. Тем не менее, в Интернете есть разветвления и учебные пособия, которые предоставляют информацию о том, как интегрироваться со многими различными платформами. Есть даже версии AdminLTE, которые интегрированы с jQuery ajax, AngularJS и / или MVC5 ASP .NET.

так что вы можете проверить это

но я думаю, что вы можете добавить в проект папку "bootstrap, dist, packages" inside "assets", если вы используете угловой CLI

Источник

Я предполагаю, что включение шаблона означает использование файла AdminLTE.css в вашем приложении.

Для этого вам нужно импортировать файл.css в ваш файл component.ts, как показано ниже:

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

PS: убедитесь, что путь правильный

Как только styleUrl указан, мы сможем получить доступ к CSS-селекторам Admin LTE или любому другому шаблону в файле 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

Источник

Мне удалось интегрировать AdminLte в мой проект Angular благодаря видео на codingFriday. Я также смог добавить маршрутизацию, и теперь у меня есть основные страницы сайта и админки с анимацией. Я новичок в веб-программировании, и в моем проекте много плохих решений (это курсовая работа в моем университете), но, возможно, это поможет кому-то начать.

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

Короче говоря, необходимо предпринять следующие шаги (источником шагов является руководство по github от codingFriday):

  1. Установите admin lte 3 в свой проект:

    npm install admin-lte@^3.0 --save

  2. Выберите панель инструментов и скопируйте все стили и скрипты ссылок из панели инструментов в angular.json:

    Например, это обновленный файл angular.json для панели 2.

    "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. Класс тела не следует применять к остальным, кроме админки.

    Решение:

    • импорт Renderer2 в компонент админ-панели.

    • в OnInit админ-панель, эти классы добавляются с помощью:

      Renderer2.addClass (...)

    • в ngOnDestroy админ-панель, эти классы удаляются с помощью:

      Renderer2.removeClass(...)

  2. После роутинга перестает работать js-анимация.

    Решение:

    • Скопируйте adminlte.js в активы (также измените путь в angular.json) и замените:

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

      к

      $( document ).ready(function()

    • Кроме того, если вы хотите запустить анимацию приборной панели (установить карту, данные диаграммы) после маршрутизации, вы должны запустить ее из кода на панели приборной панели.

Источник
Другие вопросы по тегам