Angular 2 - Vùng chứa lồng nhau

Trong Angular JS, có thể lồng các container vào bên trong nhau. Vùng chứa bên ngoài được gọi là vùng chứa mẹ và vùng chứa bên trong được gọi là vùng chứa con. Hãy xem một ví dụ về cách đạt được điều này. Sau đây là các bước.

Step 1 - Tạo một ts tệp cho vùng chứa con được gọi là child.component.ts.

Step 2 - Trong tệp đã tạo ở bước trên, hãy đặt đoạn mã sau.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

Đoạn mã trên đặt giá trị của tham số this.values ​​thành “Hello”.

Step 3 - Trong tệp app.component.ts, hãy đặt đoạn mã sau.

import { 
   Component 
} from '@angular/core'; 

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

Trong đoạn mã trên, hãy lưu ý rằng chúng tôi hiện đang gọi câu lệnh nhập để nhập child.componentmô-đun. Ngoài ra, chúng tôi đang gọi bộ chọn <child-app> từ thành phần con đến thành phần chính của chúng tôi.

Step 4 - Tiếp theo, chúng ta cần đảm bảo thành phần con cũng được bao gồm trong tệp 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 {}

Khi bạn lưu tất cả các thay đổi mã và làm mới trình duyệt, bạn sẽ nhận được kết quả sau.