Angular2-ネストされたコンテナ

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

Step 1 −作成する ts と呼ばれる子コンテナのファイル child.component.ts。

Step 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」に設定します。

Step 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モジュール。また、子コンポーネントからメインコンポーネントに<child-app>セレクターを呼び出しています。

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

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