Как программно добавить к элементу правило css

Question

Я использую Angular 6 и машинописный текст. Вот моя проблема. Мне нужно добавить конкретное правило c CSS к хосту компонента, который я пишу. Я не могу применять это правило систематически, мне нужно иметь лог c в ngOnInit() перед добавлением моего правила. Я знаю, что это звучит как плохая практика, но обходных путей нет, и это единственный способ решить возникшую у меня проблему. Я могу легко добавлять классы для новых стилей на свой хост, но я не могу найти способ добавить правило.

Некоторые люди отмечали мой вопрос как повторяющийся. Пожалуйста, прочтите внимательно мой вопрос. Я не пытаюсь добавить класс, я пытаюсь добавить ПРАВИЛО. Это совсем другое дело, и на этот вопрос нет результатов.

Вот два правила, которые у меня есть, которые я хочу добавить к моему элементу хоста в зависимости от некоторых условий:

custom-component + custom-component > .vertical-component {
    margin-top: 1rem;
}

и

custom-component + custom-component > .horizontal-component {
    margin-left: 1rem;
}

В коде моего компонента у меня есть что-то вроде этого:

export class CustomComponent {
    public constructor(private host: ElementRef, private renderer: Renderer2) {

    }

    public applyStylesToHost(): void {
        if (this.variant == TYPE.VERTICAL) {
            // Set the rule with the margin-top
        } else {
            // Set the rule with the margin-left
        }
    }
}

Я искал метод типа this.renderer.setRule(), но его нет. Как я могу программно добавить конкретное правило c к моему элементу хоста?

Ближайшее, что я нашел, - это эта ссылка . Автор предлагает сделать document.createElement("style").sheet.addRule(), но когда я попытался это сделать, метод addRule не существовал для элемента sheet.

Answer 1

Если вы хотите go таким образом, вы должны использовать, вероятно, метод:

renderer.setStyle(...)

или

renderer.addClass(...)
renderer.removeClass(...)

Я предлагаю прочитать документацию для Renderer2

Answer 2

Не могли бы вы просто добавить их как тег <style> ко всему документу?

var st = document.createElement('style'); 
st.appendChild(document.createTextNode(`
    custom-component + custom-component > .vertical-component {
        margin-top: 1rem;
    }
`));  
document.head.appendChild(st);

Answer 3

Как упоминает Баластронг, вы можете использовать ngClass logicFinished = false

ngOnInit() {
  ... your logic
  this.logicFinished = true
}

[ngClass]="{'vertical-component': logicFinished, 'horizontal-component': !logicFinished}"

Альтернативный javascript хак для решения проблемы.

this.yourElement = document.getElementById('yourElement') as HTMLElement
this.yourElement.style.margin = '1rem 0 0 0'
this.yourElement.style.margin = '0 0 0 1rem'

Но NgClass кажется лучшим решением проблемы .