Angular 8: Как оформить макет самого компонента (например, от родителя?)

Question

Мое Angular 8 приложение имеет простую структуру:

app.component. html:

<app-main-nav></app-main-nav>
<div id="main-container">
  <router-outlet></router-outlet>
</div>

Я бы хотел <app-main-nav> (который похож на обычный "left nav") шириной 160px и высотой 100% области просмотра. <div id="main-container"> должен заполнять оставшуюся часть экрана.

Обычно я бы сделал всю страницу (body?) Гибким контейнером и установил бы свойства flex для <app-main-nav> и <div id="main-container"> элементов.

Но как мне установить свойства css компонента <app-main-nav>? Как мне выбрать его в app.component.css?

Answer 1

Просто вставьте в app.component.css что-то вроде:

app-main-nav {
/*your css rules */
}

, вы также можете выбрать компонент по id или классу. Помните, что Angular компоненты по умолчанию inline, поэтому вам, возможно, придется установить для его свойства display значение block или что-то в этом роде.