Angular 2 - İç İçe Kaplar

Angular JS'de, konteynerleri iç içe yerleştirmek mümkündür. Dış kap, üst kap olarak bilinir ve içteki kap ise alt kap olarak bilinir. Bunun nasıl başarılacağına dair bir örneğe bakalım. Adımlar aşağıdadır.

Step 1 - Bir ts adlı alt kapsayıcı için dosya child.component.ts.

Step 2 - Yukarıdaki adımda oluşturulan dosyaya aşağıdaki kodu yerleştirin.

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

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

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

Yukarıdaki kod this.values ​​parametresinin değerini "Merhaba" olarak ayarlar.

Step 3 - app.component.ts dosyasına aşağıdaki kodu yerleştirin.

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

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

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

export class AppComponent { }

Yukarıdaki kodda, şimdi import ifadesini içe aktarmak için çağırdığımıza dikkat edin. child.componentmodül. Ayrıca, <child-app> seçicisini alt bileşenden ana bileşenimize çağırıyoruz.

Step 4 - Daha sonra, alt bileşenin app.module.ts dosyasına da dahil edilmesini sağlamamız gerekir.

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

Tüm kod değişikliklerini kaydettikten ve tarayıcıyı yeniledikten sonra, aşağıdaki çıktıyı alacaksınız.