Angular2 - добавление [_nghost-ххх-N] и [_ngcontent-ххх-N] путает мой код

Question

Это мой app.component.html

<header> 
    <cm-main-navigation></cm-main-navigation> 
</header> 
<router-outlet></router-outlet> 
<footer> 
    <cm-footer></cm-footer> 
</footer> 

Каждая страница моего приложения, очевидно, появляется после router- выход.

Мой КСС:

:host { 
    display: flex; 
    height: 100%; 
    flex-direction: column; 

    & > * { 
     flex: 1 0 auto; 
    } 

    header, 
    router-outlet, 
    footer { 
     flex: 0 0 auto; 
    } 

} 

&> * предполагается цель каждой страницы, генерируемый маршрутизатором-выходом, но из-за ngcontent-ххх-N он никогда не будет применяться:

[_nghost-ray-1] > *[_ngcontent-ray-1] { 
    -webkit-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
} 

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

Фактически, проверка моего корневого элемента страницы css не появляется. Здесь я получил его от других элементов, таких как заголовок, где он пришел вместе с:

[_nghost-ray-1] footer[_ngcontent-ray-1], [_nghost-ray-1] header[_ngcontent-ray-1], [_nghost-ray-1] router-outlet[_ngcontent-ray-1] { 
    -webkit-flex: 0 0 auto; 
    -ms-flex: 0 0 auto; 
    flex: 0 0 auto; 
} 

Это работает некоторую Угловые 2 версии назад, но он перестал работать некоторые патчи назад.

Итак, мой вопрос: как настроить таргетинг на любые дочерние узлы хоста, которые могут динамически меняться? Я не хочу менять настройку тени.

Нет таких CSS появляются здесь:

мне это не похоже на ошибку. Это правильный CSS, который обычно работает, это Angular 2, нарушающий его.

Вот как это должно быть:

[_nghost-ray-1] > * { 
    -webkit-flex: 1 0 auto; 
    -ms-flex: 1 0 auto; 
    flex: 1 0 auto; 
} 

Answer 1

Вам придется использовать специальный селектор /deep/.

https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-

Итак:

:host /deep/ > * { 
    flex: 1 0 auto;  
}