Рендеринг только шаблона компонента в router-outlet в Angular 5

У меня возникают проблемы с использованием Angular router-outlet, потому что он добавляет новые элементы в DOM и влияет на применяемые правила CSS, поскольку он нарушает отношения родитель-потомок некоторых элементов. Вот пример того, что я имею в виду:

Пример кода

Как видите, после каждого <router-outlet></router-outlet> находится вставленный селектор компонента (app-fwc-dashboard-main и app-fwc-policy-main в коде), а под ним идет вся разметка шаблона компонента. Это приводит к тому, что некоторые правила CSS не применяются, а макет нарушается.

Я сравнивал код одной версии с другой и понял, что селектор компонентов имеет класс ng-star-inserted, поэтому я попытался добавить отсутствующие правила CSS, например:

.grid-y > .ng-star-inserted > .auto, .grid-y > .ng-star-inserted > .shrink {
  height: auto;
}

.grid-y > .ng-star-inserted > .cell {
  width: auto;
}

(etc)

Но почему-то не могу найти, не получилось. Итак, мой вопрос: есть ли способ указать выходу маршрутизатора Angular вводить ТОЛЬКО разметку шаблона компонента и избегать добавления селектора?

Или есть другие предложения по этой проблеме? Заранее спасибо!


angular css angular-routing angular-router
person Fel    schedule 05.03.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Я не думаю, что это возможно.

Как я вижу, у вас есть два возможных решения:

  • Удалите селекторы > в вашем css.

  • Включите селектор компонентов в свой css.

Если это не работает для вас, я предлагаю переписать код таким образом, чтобы с ним было легче работать.

person Chrillewoodz    schedule 05.03.2018

arrow_upward
0
arrow_downward

Вы можете использовать селектор атрибутов для компонента. Добавьте классы, используя @HostBinding и селектор css :host внутри стилей.

@Component({
   selector: '[attributeSelector]',
   template: 'red text',
   styles: [':host {color: red}'],
})
class A {
   @HostBinding('class') class = 'boundClass';
}

В этом случае router-outlet создаст что-то вроде

<router-outlet></router-outlet>
<div attributeSelector class="boundClass" nghost_1>red text</div>
person Ilia Volk    schedule 05.03.2018
comment
Интересно, я сделаю несколько тестов с ним. - person Fel; 05.03.2018
comment
Только что проверил, можно указать элемент: selector: '<section [component-tag]>' - person Ben Racicot; 14.03.2020

arrow_upward
0
arrow_downward

Ответ Ильи Волка показал мне правильный путь для поиска решения. Я изменил селектор компонентов на это:

selector: '[app-vpn-component].grid-y.medium-grid-frame',

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

<div app-fwc-vpn-main="" class="grid-y medium-grid-frame ng-star-inserted">
  ...
</div>

И теперь макет выглядит как прежде.

person Fel    schedule 05.03.2018