📌  相关文章
📜  Angular 2-嵌套容器

📅  最后修改于: 2020-10-28 05:12:32             🧑  作者: Mango

在Angular JS中，可以将容器相互嵌套。外部容器称为父容器，内部容器称为子容器。让我们看一个有关如何实现此目的的示例。以下是步骤。

步骤1-为名为child.component.ts的子容器创建一个ts文件。

子组件

步骤2-在上一步创建的文件中，放置以下代码。

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

@Component ({ 
   selector: 'child-app', 
   template: '
 {{values}} 
 ' 
}) 

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: ' ' 
}) 

export class AppComponent { }

在上面的代码中，请注意，我们现在正在调用import语句来导入child.component模块。同样，我们在子组件到主组件之间调用选择器。

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

保存所有代码更改并刷新浏览器后，您将获得以下输出。

嵌套容器