Angular 2-入れ子になったコンテナ

Angular JSでは、コンテナーを相互にネストできます。外側のコンテナは親コンテナと呼ばれ、内側のコンテナは子コンテナと呼ばれます。これを達成する方法の例を見てみましょう。手順は次のとおりです。

ステップ1 *- *child.component.ts という子コンテナの ts ファイルを作成します。

ステップ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 { }

上記のコードでは、 child.component モジュールをインポートするためにimportステートメントを呼び出していることに注意してください。また、子コンポーネントからメインコンポーネントに<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 {}

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

ネストされたコンテナ

Angular2-nested-containers

Angular 2-入れ子になったコンテナ