Кроме основных компонентов в приложении мы также можем определять какие-то вспомогательные компоненты, которые управляют каким-то участком разметки html. Более того в приложении на странице может быть ряд разных блоков с какой-то определенной задачей. И для каждого такого блока можно создать отдельный компонент, чтобы упростить управление блоками на странице.
Добавим в проект второй компонент. Для этого добавим в папку src/app новый файл child.component.ts. В итоге весь проект будет выглядеть следующим образом:
Определим в файле child.component.ts следующий код:
import { Component } from "@angular/core"; @Component({ selector: 'child-comp', standalone: true, template: `<h2>ChildComponent Header</h2>` }) export class ChildComponent {}
Здесь определен класс ChildComponent. Опять же чтобы сделать этот класс компонентом, необходимо применить декоратор @Component
. Стоит отметить,
что этот компонент определен как автономный (standalone: true
)
Компонент будет управлять разметкой html, которая будет вставляться в элемент child-comp
и в которой будет просто выводиться заголовок.
Теперь определем в файле app.component.ts код главного компонента приложения - AppComponent :
import { Component } from "@angular/core"; import {ChildComponent} from './child.component'; @Component({ selector: "my-app", standalone: true, imports: [ChildComponent], template: `<h1>AppComponent Header</h1> <child-comp></child-comp>`, }) export class AppComponent {}
Это основной компонент, который будет запускаться при запуске приложения, и через него мы будем использовать остальные компоненты. Так,
компонент ChildComponent будет загружаться в элемент child-comp
. И в шаблоне компонента AppComponent как раз определен такой элемент. AppComponent также
может определять еще какой-то свой контент. Однако, чтобы использовать компонент ChildComponent, его надо импортировать:
import {ChildComponent} from './child.component'; //.................................. imports: [ChildComponent],
В файле main.ts, код которого выполняется при загрузке приложения, загружается компонент AppComponent:
import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; bootstrapApplication(AppComponent);
В итоге при загрузке приложения загрузится главный компонент, который, в свою очередь, загрузит ChildComponent:
При использовании дочерних компонентов следует помнить, что они образуют свой контекст, в котором определяют свои переменные, функции, стили и т.д. Например, определим в файле child.component.ts следующий код:
import { Component } from "@angular/core"; @Component({ selector: 'child-comp', standalone: true, template: `<h2>Hello from {{name}}!</h2>`, styles: [`h2{color:navy;}`] }) export class ChildComponent { name= "ChildComponent"; }
Здесь шаблон компонента выводит в заголовке значение переменной name, определенной в классе компонента. И кроме того, здесь определены стили для элемента h2.
Теперь изменим код компонента AppComponent в файле app.component.ts:
import { Component } from "@angular/core"; import {ChildComponent} from './child.component'; @Component({ selector: "my-app", standalone: true, imports: [ChildComponent], template: `<h2>Hello from {{name}}</h2> <child-comp></child-comp>`, styles: ["h2 {color:black;}"] }) export class AppComponent { name = "AppComponent"; }
В компоненте AppComponent также определена переменная name, только с другим значением. Кроме того, компонент определяет стиль для заголовка h2.
И если мы запустим проект, то мы увидим, что стили одного компонента не применяются к другому. Каждый компонент очерчивает свою область с помощью шаблона, свое представление, которым он и управляет.
Также каждый компонент использует свое значение свойства name. То есть компоненты фактически существуют относительно независимо.
Элемент ng-content
позволяет родительским компонентам внедрять код html в дочерние компоненты. Так, изменим компонент ChildComponent
следующим образом:
import { Component } from "@angular/core"; @Component({ selector: 'child-comp', standalone: true, template: `<ng-content></ng-content> <p>Hello from {{name}}!</p>`, styles: [`h2 {color:navy;}`] }) export class ChildComponent { name= "ChildComponent"; }
Вместо элемента <ng-content>
извне можно будет передать любое содержимое.
И изменим код главного компонента AppComponent:
import { Component } from "@angular/core"; import {ChildComponent} from './child.component'; @Component({ selector: "my-app", standalone: true, imports: [ChildComponent], template: `<child-comp><h2>Hello from {{name}}</h2></child-comp>`, styles: ["h2 {color:black;}"] }) export class AppComponent { name = "AppComponent"; }
В элемент <child-comp>
здесь передается заголовок <h2>Добро пожаловать {{name}}!</h2>
.
Затем этот заголовок будет вставляться в дочерний компонент ChildComponent на место <ng-content>
:
Причем управлять разметкой, которая вставляется в <ng-content>
, будет AppComponent. Поэтому именно этот компонент задает стили и выражения привязки для вставляемого куска html.