Angular - 嵌套组件

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

在上面的代码中，请注意我们现在正在调用 import 语句来导入 child.component 模块。我们还在从子组件调用 <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 {}

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