Как создать глобальную функцию в Angular для применения динамических встроенных стилей на основе классов, подобных CSS? ⇐ Html

[Anonymous]

Я хочу разместить общий JavaScript для всех тегов
Например, давайте выполним поиск по всем классам и посмотрим, есть ли класс с шириной 50 пикселей, затем поместим тот же тег, которому мы дали этот класс, и присвоим ему тот же стиль inline.
Например, поместите это вот так в Angular

Код: Выделить всё

Davood Beheshti

Давайте отрисуем вот так

Код: Выделить всё

Davood Beheshti

Теперь код, который я написал в app.comComponent.ts, такой, конечно я его вставил в afterViewInit.
Вроде всё правильно, но не работает!!!

Код: Выделить всё

ngAfterViewInit(): void {
this.changeStyleClass()
}

changeStyleClass() {
document.addEventListener("DOMContentLoaded", () => {
const allElements = document.querySelectorAll("[class*='width-'], [class*='height-'], [class*='minwidth-'], [class*='maxwidth-']");

allElements.forEach((el: HTMLElement) => {
el.classList.forEach(cls => {
if (cls.startsWith("width-")) {
el.style.width = cls.replace("width-", "");
}
if (cls.startsWith("minwidth-")) {
el.style.minWidth = cls.replace("minwidth-", "");
}
if (cls.startsWith("maxwidth-")) {
el.style.maxWidth = cls.replace("maxwidth-", "");
}
if (cls.startsWith("height-")) {
el.style.height = cls.replace("height-", "");
}
});
});
});
}

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

Подробнее здесь: https://stackoverflow.com/questions/797 ... yles-based