Tengo un archivo que usa la casilla de verificación anidada en angular. He creado un componente y puse el siguiente código en el cuerpo 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');
        });
    }

Y luego escribí esto en el código 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;
  }

Si pongo este código CSS en el archivo css principal que: style.css, funciona bien sin ningún problema como se esperaba. Pero, si pongo el CSS para el componente, no funciona. ¿Alguna idea de por qué es así?

-2
Abo Ahmed 24 oct. 2019 a las 15:28

3 respuestas

La mejor respuesta

Establezca la encapsulación en Ninguno en el componente en el que style.css no funciona así>

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  encapsulation: ViewEncapsulation.None
})
2
Inderjeet Klsi 24 oct. 2019 a las 12:31

Angular está funcionando de la forma en que se supone que funciona si sus estilos de escritura en component.css se aplicarán solo a ese componente en particular. style.css contiene estilos globales para que se apliquen a través de la aplicación que tiene dos opciones para hacer que su estilo sea global aquí, uno puede ser encapsulation: ViewEncapsulation.None, pero eso hará que todos los estilos en este componente sean globales y afectará a otros componentes, así como a otros se usa :: ng-deep a un estilo particular solo, por ejemplo

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

Por lo tanto, debe usar estilos aplicados a body, etc. en style.css y estilo relacionado con componentes en component.css

0
jitender 24 oct. 2019 a las 12:39

Descubrí que este problema está sucediendo porque estoy agregando dinámicamente estos elementos en el momento de la ejecución. Por lo tanto, debe agregarse en el estilo general.css o escribir:

encapsulation: ViewEncapsulation.None

Que hará lo mismo ya que hace que css sea general

Gracias por guiarte.

0
Abo Ahmed 24 oct. 2019 a las 13:32
58541421