Посмотреть вопрос инкапсуляции angular5 - PullRequest
Новая
       5

Посмотреть вопрос инкапсуляции angular5

0 голосов
/ 23 ноября 2018

Я хочу применить CSS к моим дочерним компонентам, которые вызываются из родительского компонента с помощью хитрости, которая работает нормально

Инкапсуляция: ViewEncapsulation.None

Но когдаi Переходя к другим маршрутам или страницам, он выбирает стиль компонента, инкапсуляция которого не является странным поведением

, т.е. когда я нажимаю на маршрут http://localhost:4200/example

, а компонент примера имеет 

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None

})

на этом маршруте есть два других компонента

example.component.html 

<app-example1></app-example1>

<app-example2></app-example2>

css применяется к соответствующим детям

но когда я нажимаю на example2, он также выбирает css для example1 

@Component({
      selector: 'app-example2',
      templateUrl: './example2.component.html',
      styleUrls: ['./example2.component.css'],


    })

, когда я удаляю свойство encapsulation, он не выбирает для example2 route

или когда я получаю прямой доступ к маршруту http://localhost:4200/example2

работает нормально и css берет только example2 css, но когда я перехожу к example1 и перемещаюсь к example2

, он выбирает стиль компонента примера 1 из-за 

 encapsulation: ViewEncapsulation.None

когда я удаляю это свойство или напрямую обращаюсь к маршруту, он работает нормально, в чем проблема, я не знаю, почему он ведет себя так:

и example1 и example2 - два разных модуля и имеют свои собственные маршруты

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

simple old css hack

Добавьте уникальный класс, такой как .app-component, к самому верхнему элементу вашего компонента и убедитесь, что все остальные стили являются дочерними для этого класса.

Еще лучшеесли вы используете какой-либо препроцессор CSS.

Информация:

При использовании ViewEncapsulation.None , определенные стили добавляются в HTMLстраница, использующая тег style в элементе head .

Таким образом, согласно древним соглашениям, ваши стили каскадируются.

Следовательно, когда у вас есть время, вложите свойвремя в соглашениях по стилю CSS, таких как BEM или что-то еще.

Чао!

0 голосов
/ 23 ноября 2018

Просмотр инкапсуляции определяет, могут ли шаблон и стили, определенные в компоненте, влиять на все приложение или наоборот.

Для ViewEncapsulation Нет - стили из компонентараспространяться обратно к основному HTML и поэтому видны всем компонентам на странице.Будьте осторожны с приложениями, в которых есть компоненты None и Native.У всех компонентов с инкапсуляцией None их стили будут продублированы во всех компонентах.

Если вы удалите свойство ViewEncapsulation, тогда оно примет значение по умолчанию, равное Emulated

В этом случае стили изОсновной HTML распространяется на компонент.Стили, определенные в декораторе @Component этого компонента, относятся только к этому компоненту.

...