如何在 Angular 中在同一页面中添加不同的组件 - Html

在 Angular 中，我们可以轻松地在同一个页面中添加不同的组件。这允许我们将大型应用程序分解为较小的、可重用的部分，并且可以提高代码的清晰度和可维护性。

添加组件

要在 Angular 中添加组件，您需要首先创建组件并导出它。要创建一个组件，请执行以下操作：

1. 在您的项目中创建一个新文件夹，并在其中创建一个名为 my-component 的新组件。

2. 在组件的文件夹中创建 my-component.component.ts 文件，并将其编写成以下形式：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'my-component',
     template: '<h1>Hello, Angular!</h1>'
   })
   export class MyComponent {}
   

   在这个例子中，我们定义了一个名为 MyComponent 的组件，在模板中它将输出一个“Hello, Angular!”的标题。

3. 在模板中添加组件。

   现在我们已经定义了我们的组件，我们需要在模板中添加它。要在 HTML 中添加组件，请执行以下操作：

   <my-component></my-component>
   

   在这个例子中，我们将 MyComponent 添加到了我们的模板中。

多个组件

要在同一页面中添加多个组件，您只需重复上述步骤，并在模板中添加更多的组件即可。例如：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Multiple Components</h1>
    <my-component></my-component>
    <another-component></another-component>
  `
})
export class AppComponent {}

在这个例子中，我们定义了两个组件，一个是 MyComponent，另一个是 AnotherComponent。然后，我们在 AppComponent 的模板中将这两个组件添加到了页面中。

总结

在 Angular 中添加不同的组件到同一个页面中是非常简单的。只需创建您的组件并将其添加到您的模板中即可。通过将应用程序分解为小部件，您可以提高代码的可重用性和可维护性。