Angular 2 嵌套容器

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

步骤 1 ： 创建一个 ts 名为的子容器的文件 child.component.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 语句来导入 子组件 模块。此外，我们将 选择器从子组件调用到我们的主组件。

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

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