Как определить конкретные файлы CSS, JS для конкретного маршрута?

Question

Как определить конкретные файлы CSS, JS для определенного маршрута в угловых?

angular.json:

... ],
"styles": [
  "src/styles.css"
],
"scripts": [
  "src/app.min.js"
] ...

Все файлы CSS или JS для всех маршрутов!

Я хочу определить конкретные файлы CSS, JS для определенных маршрутов в угловых?

Answer 1

Маршрут приведет вас к определенному компоненту, поэтому, если вы определите конкретные CSS-файлы для этого компонента, вы сможете эффективно использовать конкретный стиль для определенных маршрутов.

@Component({
    stylesUrls: ['path-to-specific-css-file']
})

Посмотрите надокументация здесь: https://angular.io/guide/component-styles Для определения стилей в компонентах.

Редактировать: В файле ts / js, где определен компонент, вы можете добавить определенные сценарии для компонента и любых дочерних элементов, которые могут у него быть.

Answer 2

Это может быть сделано с помощью базовой реализации JS

const script = this.document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = url; // the script url like `assets/lib.min.js` 
script.onload = () => {
  // lib loaded
};

this.document.body.appendChild(script);

Теперь, работая с angular, хотя это работает, вам может понадобиться обернуть это в сервис, а затем использовать наблюдаемые для обработки условий после нагрузки.Свертывание в сервисе помогает этой логике работать в вашей угловой среде, а не в качестве отдельной.

Эта статья может помочь вам настроить ее в угловой среде.

Answer 3

Перейдите к компоненту, который посещает ваш маршрут.

Измените его стратегию инкапсуляции на NONE:

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my-style'],
  encapsulation: ViewEncapsulation.None,
})

Все стили, определенные в css этого компонента, будут влиять на любой дочерний компонент.