От автора: продолжаем изучать, как работают в Angular компоненты. В Angular JS можно помещать контейнеры один в другой. Внешний контейнер называется родительским контейнером, а внутренний — дочерним контейнером. Давайте рассмотрим, как это реализуется.
Шаг 1 — Создайте файл ts для дочернего контейнера с именем child.component.ts.
Шаг 2 – Добавьте следующий код в файл, созданный в предыдущем шаге.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Component } from '@angular/core'; @Component ({ selector: 'child-app', template: '<div> {{values}} </div> ' }) export class ChildComponent { values = ''; ngOnInit() { this.values = "Hello"; } } |
Вышеприведенный код устанавливает для параметра this.values значение «Hello».
Шаг 3 — Поместите следующий код в файл app.component.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { Component } from '@angular/core'; import { ChildComponent } from './child.component'; @Component ({ selector: 'my-app', template: '<child-app></child-app> ' }) export class AppComponent { } |
Обратите внимание, что мы вызываем оператор import для импорта модуля child.component. Также мы вызываем селектор <child-app> из дочернего компонента в основной компонент.
Шаг 4 — Затем нам нужно обеспечить, чтобы дочерний компонент также включен в файл app.module.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MultiplierPipe } from './multiplier.pipe' import { ChildComponent } from './child.component'; @NgModule ({ imports: [BrowserModule], declarations: [AppComponent, MultiplierPipe, ChildComponent], bootstrap: [AppComponent] }) export class AppModule {} |
После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
