CSS-коды не работают в компоненте CSS, но работают в style.css в Angular

Question

У меня есть один файл, который использует вложенный флажок в угловых. Я создал один компонент и поместил приведенный ниже код в тело ngOnInit ()

    const mainUl = document.getElementById('siteDetail');
    mainUl.classList.add('ulClassStyle');
    const names = ['Laptops', 'TVs', 'Microphones'];
    const secondLi = document.createElement('li');
    secondLi.classList.add('liClassStyle');
    const secondSpan = document.createElement('span');
    secondSpan.classList.add('caret');
    const secondMaincheckbox = document.createElement('input');
    secondMaincheckbox.type = 'checkbox';
    secondMaincheckbox.id = 'secondOption';
    secondMaincheckbox.checked = true;
    const secondMainlbl = document.createElement('label');
    secondMainlbl.id = 'label';
    secondMainlbl.htmlFor = 'secondOption';
    secondMainlbl.classList.add('labelClassStyle');
    secondMainlbl.appendChild(document.createTextNode('Electronics'));
    secondSpan.appendChild(secondMainlbl);
    secondLi.appendChild(secondMaincheckbox);
    secondLi.appendChild(secondSpan);

    const secondSubUl = document.createElement('ul');
    secondSubUl.classList.add('ulClassStyle');

    for (let i = 0; i < names.length; i++) {
        const name = names[i];
        const secondSubLi = document.createElement('li');
        secondSubLi.classList.add('liClassStyle');
        const secondSubCheckbox = document.createElement('input');
        secondSubCheckbox.type = 'checkbox';
        secondSubCheckbox.name = 'name' + i;
        secondSubCheckbox.value = 'value';
        secondSubCheckbox.id = 'secondSubCheckboxid' + i;
        secondSubCheckbox.checked = true;
        secondSubCheckbox.onclick = function() { secondMyfunction(this); };
        secondSubCheckbox.classList.add('secondSubOption');
        secondSubLi.appendChild(secondSubCheckbox);
        secondSubLi.appendChild(document.createTextNode(name));
        secondSubUl.appendChild(secondSubLi);
        secondSubUl.classList.add('nested');
    }
    secondLi.appendChild(secondSubUl);
    mainUl.appendChild(secondLi);

    const secondCheckboxes = document.querySelectorAll('input.secondSubOption');
    const secondCheckall = document.getElementById('secondOption');
        secondCheckall.onclick = function() {
        for (let i = 0; i < secondCheckboxes.length; i++) {
            secondCheckboxes[i].checked = this.checked;
        }
    };

    function secondMyfunction(checkBox) {
        const secondCheckedCount = document.querySelectorAll('input.secondSubOption:checked').length;
        secondCheckall.checked = secondCheckedCount > 0;
        secondCheckall.indeterminate = secondCheckedCount > 0 && secondCheckedCount < secondCheckboxes.length;
    }

    const secondToggler = document.getElementsByClassName('caret');
    for (let i = 0; i < secondToggler.length; i++) {
        secondToggler[i].addEventListener('click', function() {
            this.parentElement.querySelector('.nested').classList.toggle('active');
            this.classList.toggle('caret-down');
        });
    }

, а затем написал это в коде CSS:

body {
    color: #555;
    font-size: 1.25em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  hr {
    margin: 50px 0;
  }

  .ulClassStyle
  {
      list-style: none;
  }

  .container {
    margin: 40px auto;
    max-width: 700px;
  }

  .liClassStyle {
    margin-top: 1em;
  }

  .labelClassStyle {
    font-weight: bold;
  }
  .nested {
    display: none;
  }

  .caret {
    cursor: pointer;
    user-select: none;
  }

  .caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
  }

  .caret-down::before {
    transform: rotate(90deg);  
  }

  .active {
    display: block;
  }

Если я поместил этот код CSS вОсновной файл CSS, который: style.css, работает нормально, без проблем, как и ожидалось. Но, если я добавлю CSS для компонента, он не будет работать. Есть идеи, почему это так?!

Answer 1

Установить инкапсуляцию None в компоненте, в котором style.css не работает следующим образом>

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

Answer 2

Я обнаружил, что эта проблема возникает, потому что я динамически добавляю эти элементы во время выполнения. Таким образом, он должен быть добавлен в общий файл style.css или напишите:

encapsulation: ViewEncapsulation.None

, что сделает то же самое, что и css general

Спасибо за руководство.

Answer 3

Angular работает так, как будто он работает, если ваши стили записи в component.css будут применяться только к этому конкретному компоненту. style.css содержит глобальные стили, поэтому они будут применяться, хотя у приложения есть два вариантачтобы сделать ваш стиль глобальным, можно использовать encapsulation: ViewEncapsulation.None, но это сделает все стили в этом компоненте глобальными и повлияет на другие компоненты, в том числе использование :: ng-deep только для определенного стиля, например

 ::ng-deep .liClassStyle {
    margin-top: 1em;
  }

Поэтому вы должны использовать стили, примененные к body и т. Д. В style.css, и стиль, связанный с компонентами, в component.css