Учебники

Угловой 2 — Вложенные контейнеры

Октябрь 14, 2018

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

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

Child.components

Шаг 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».

Шаг 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 {}

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

45
Share: