Работа с компонентами

Кроме основных компонентов в приложении, мы также можем определять какие-то вспомогательные компоненты, которые управляют каким-то участком разметки html. Более того в приложении на странице может быть ряд разных блоков с какой-то определенной задачей. И для каждого такого блока можно создать отдельный компонент, чтобы упростить управление блоками на странице.

Добавим в проект второй компонент. Для этого добавим в папку src/app новый файл child.component.ts. В итоге весь проект будет выглядеть следующим образом:

Определим в файле child.component.ts следующий код:

import { Component } from '@angular/core'

@Component({
  selector: 'child-comp',
  template: ` <h2>Добро пожаловать {{ name }}!</h2> `,
  styles: [
    `
      h2,
      p {
        color: red;
      }
    `,
  ],
})
export class ChildComponent {
  name = 'Евгений'
}

Здесь определен класс ChildComponent. Опять же чтобы сделать этот класс компонентом, необходимо применить декоратор @Component.

Компонент будет управлять разметкой html, которая будет вставляться в элемент child-comp.

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

И кроме того, здесь определены стили для элементов h2 и p.

Теперь изменим код компонента AppComponent в файле app.component.ts:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <child-comp></child-comp>
    <p>Привет {{ name }}</p>
  `,
  styles: [
    `
      h2,
      p {
        color: #333;
      }
    `,
  ],
})
export class AppComponent {
  name = 'Петр'
}

Это основной компонент, который будет запускаться при загрузке приложения, и через него мы будем использовать остальные компоненты. Так, компонент ChildComponent будет загружаться в элемент child-comp. И в шаблоне компонента AppComponent как раз определен такой элемент.

Кроме того, компонент определяет стили для тех же элементов на странице, и также, как и ChildComponent, определяет свойство name, только с другим значением.

Чтобы использовать все определенные в проекте компоненты, они должны быть указаны в главном модуле приложения. Определим в файле app.module.ts следующий модуль:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component'
import { ChildComponent } from './child.component'
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, ChildComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Запустим проект:

Результат показывает, что несмотря на то, что один компонент как бы включен в другой с помощью тега <child-comp>, но тем не менее стили одного компонента не применяются к другому. Каждый компонент очерчивает свою область с помощью шаблона, свое представление, которым он и управляет.

Также каждый компонент использует свое значение свойства name. То есть компоненты фактически существуют относительно независимо.

Даже если мы уберем из ChildComponent определение свойства name:

import { Component } from '@angular/core'

@Component({
  selector: 'child-comp',
  template: ` <h2>Добро пожаловать {{ name }}!</h2> `,
  styles: [
    `
      h2,
      p {
        color: red;
      }
    `,
  ],
})
export class ChildComponent {}

То родительский или главный компонент, все равно не окажет влияния на ChildComponent:

Хотя может показаться, что ChildComponent для выражения {{name}} в своем шаблоне должен использовать свойство name из родительского компонента AppComponent. Но это не так. Компоненты относительно независимы друг от друга.

ng-content

Элемент ng-content позволяет внедрять родительским компонентам код html в дочерние компоненты. Так, изменим компонент ChildComponent следующим образом:

import { Component } from '@angular/core'

@Component({
  selector: 'child-comp',
  template: `
    <ng-content></ng-content>
    <p>Привет {{ name }}</p>
  `,
  styles: [
    `
      h2,
      p {
        color: navy;
      }
    `,
  ],
})
export class ChildComponent {
  name = 'Евгений'
}

Вместо элемента <ng-content> извне можно будет передать любое содержимое.

И изменим код главного компонента AppComponent:

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <child-comp
      ><h2>Добро пожаловать {{ name }}!</h2></child-comp
    >
  `,
  styles: [
    `
      h2,
      p {
        color: #333;
      }
    `,
  ],
})
export class AppComponent {
  name = 'Tom'
}

В элемент <child-comp> здесь передается заголовок <h2>Добро пожаловать {{name}}!</h2>. Затем этот заголовок будет вставляться в дочерний компонент ChildComponent на место <ng-content>:

Причем управлять разметкой, которая вставляется в <ng-content>, будет AppComponent. Поэтому именно этот компонент задает стили и выражения привязки для вставляемого куска html.