Angular 2：导出模块上的组件并在模块内导入和使用它

typescript

Angular是一种流行的开发框架，用于构建现代化的Web应用程序。在Angular中，模块起着重要的作用，它们用于组织和管理应用程序的不同部分。在本文中，我们将讨论如何在Angular模块中导出组件，并在同一模块内导入和使用它们。

导出组件

在Angular中，要在模块中导出组件，我们需要使用exports关键字。通过在模块的exports数组中添加组件，我们可以将它们暴露给其他模块和组件使用。让我们来看一个例子：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: '<h1>Example Component</h1>'
})
export class ExampleComponent {
  // Component logic goes here
}

在上面的代码中，我们定义了一个名为ExampleComponent的组件，并使用@Component装饰器进行配置。然后，我们使用export关键字将该组件导出。

在模块中导入组件

要在同一模块中使用已导出的组件，我们需要在模块中导入它们。在Angular中，我们可以使用imports关键字来导入其他模块和组件。让我们继续上面的例子，看看如何在模块中导入并使用ExampleComponent：

typescript
import { NgModule } from '@angular/core';
import { ExampleComponent } from './example.component';
@NgModule({
  declarations: [ ExampleComponent ],
  imports: [ ],
  exports: [ ExampleComponent ]
})
export class ExampleModule { }

在上面的代码中，我们在ExampleModule模块中导入了ExampleComponent组件，并将其添加到declarations数组中。然后，我们将该组件添加到exports数组中，以便其他模块可以使用它。

在模块中使用已导入的组件

在将组件导入和导出后，我们可以在同一模块中使用它们。在模块中使用已导入的组件与在其他组件中使用它们是相似的。让我们来看一个例子：

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-example-module',
  template: '<h1>Example Module</h1><app-example></app-example>'
})
export class ExampleModuleComponent {
  // Component logic goes here
}

在上面的代码中，我们定义了一个名为ExampleModuleComponent的组件，并在其模板中使用了ExampleComponent。通过使用标签，我们将ExampleComponent添加到了ExampleModuleComponent中。

在本文中，我们探讨了如何在Angular模块中导出组件，并在同一模块内导入和使用它们。我们看到了如何使用export关键字将组件导出，并使用imports关键字将其导入到模块中。最后，我们展示了如何在模块中使用已导入的组件。通过这些步骤，我们可以更好地组织和管理我们的Angular应用程序。