Создать компонент с Dynami c styleUrls в angular 9

Question

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

Существует общий метод, называемый Lazy Load CSS во время выполнения, на который я добавлю ссылку, но проблема заключается в том, что метод css добавляется глобально. и поскольку все css файлы имеют классы с одинаковыми именами, последний файл в DOM Added влияет на все компоненты (т. е. капсуляция не используется в этом методе), поэтому этот метод неэффективен.

https://egghead.io/lessons/angular-lazy-load-css-at-runtime-with-the-angular-cli

Наконец, я поставил картинку ниже, которая четко показывает, что я хочу сделать точно.

player.component.ts:

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player-' + number + '.css']
})
export class PlayerComponent implements OnInit {

  @Input() number: number;

  constructor() {}

  ngOnInit(): void {}

}

player.component. html:

<p class="title">player works!</p>

player-1. css:

.title {
  color: red;
}

player-2. css:

.title {
  color: orange;
}

game.component. html:

<div>
  <app-player [number]="1"></app-player>
  <app-player [number]="2"></app-player>
  <app-player [number]="3"></app-player>
</div>

Как это можно быть сделано? Любое решение приветствуется.

Спасибо.

Answer 1

Если вы ищете только динамическое изменение цвета, размера шрифта и т. Д. c .., вам следует пересмотреть вопрос об использовании глобальных тем.

Принимая во внимание, что при наличии существенных различий в макете у вас есть несколько вариантов:

1. Создать базовый класс компонентов
   • , содержащий все логи c
   • Извлекайте другие компоненты из этого компонента с помощью других файлов стилей.

Преимущество решения, приведенного выше, заключается в том, что вы также можете использовать подходящие имена для дочерних компонентов, которые могли бы сделать код / директива более читабельна. Вместо использования цифр 1,2,3 у вас есть darkListComponent, lightListComponent et c ..

Используйте ngClass:

• <div [ngClass]="'my-component-style-' + number"></div>
• Вы по-прежнему можете разделять свои таблицы стилей, передавая их в styleUrls в файле component.ts. (styleUrls: ['theme1.scss','theme2.scss'])
• Или вы можете объявить все классы в одном файле для максимального повторного использования стилей.

my-component-style-1,my-component-style-2 { ...same styling }, my-component-style-2 { color: orange; }

Опция 2 ближе к вашему, и вам нужно только обновить шаблон и таблицу стилей, чтобы он работал.