Вложенные компоненты

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

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

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

import { Component } from "@angular/core";
     
@Component({
    selector: 'child-comp',
    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",
    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',
    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",
    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

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

import { Component } from "@angular/core";
      
@Component({
    selector: 'child-comp',
    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",
    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.