Angular. ViewChild, ViewChildren, ContentChild и ContentChildren

Опубликовано в Angular • 14 февраля 2019 г. • 1 мин. на чтение

Angular предоставляет 4 декоратора свойств @ViewChildren, @ViewChild, @ContentChildren и @ContentChild для доступа к дочерним элементам:

viewchildren-viewchild-contentchildren-and-contentchild

<todo-input> и <todo-item> рассматривается как ViewChildren <todo-app>
<app-footer> (если он определен как Angular компонент или директива) рассматривается как ContentChild.

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

Решение проблемы - установка новой версии @angular/cli

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

Краткая инструкция по профилировке Change Detection в Angular

Пример условного перенаправления пользователя в зависимости от некого количества

ng add @nguniversal/express-engine --clientProject 
npm run build:ssr && npm run serve:ssr