Компоненты Angular 2 — Вложенные контейнеры

Компоненты Angular 2 — Вложенные контейнеры

От автора: продолжаем изучать, как работают в Angular компоненты. В Angular JS можно помещать контейнеры один в другой. Внешний контейнер называется родительским контейнером, а внутренний — дочерним контейнером. Давайте рассмотрим, как это реализуется.

Шаг 1 — Создайте файл ts для дочернего контейнера с именем child.component.ts.

Компоненты Angular 2 — Вложенные контейнеры

Шаг 2 – Добавьте следующий код в файл, созданный в предыдущем шаге.

import { 
  Component 
} from '@angular/core'; 
 
@Component ({ 
  selector: 'child-app', 
  template: '<div> {{values}} </div> ' 
}) 
 
export class ChildComponent { 
  values = ''; 
  ngOnInit() { 
 this.values = "Hello"; 
  } 
}

Вышеприведенный код устанавливает для параметра this.values значение «Hello».

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаг 3 — Поместите следующий код в файл app.component.ts.

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.

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 {}

После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

Компоненты Angular 2 — Вложенные контейнеры

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree