了解组件的用途及其基本部分（模板、类、元数据）

2019-08-06 08:00:00 · 飞浪

介绍组件是当今广泛使用的术语，越来越多的人正在使用组件及其各种属性。那么让我们看看它们是什么以及如何使用它们。 Angular中的组件是什么？ Angular中的组件是

介绍

组件是当今广泛使用的术语，越来越多的人正在使用组件及其各种属性。那么让我们看看它们是什么以及如何使用它们。

Angular 中的组件是什么？

Angular 中的组件是应用程序的关键和基本构建块。每个 Angular 应用程序可能都有一个由不同组件组成的树，这些组件根据组件实现的功能进行分类。

Angular 遵循基于组件的架构，这意味着每个 Angular 应用程序都应包含至少一个组件才能运行 Angular 应用程序。它使用 MVC（模型视图控制器）模式，其中视图将由组件管理，因为视图（HTML）将根据组件提供的数据进行呈现。

简而言之，组件是 Angular 中的一切；因此，它只是一种可以使用Class关键字创建的组件指令。

为什么要使用组件？

原因有很多，但以下列举几个主要原因。

简化基于组件的架构
组件可重用性
基于组件的开发提高了应用程序的整体性能
轻松进行错误处理

组件元数据

让我们看一个组件装饰器的简单例子。

演示应用程序.组件.ts

      @Component({
  selector: 'demo-app',
  templateUrl: './demo=app.component.html',
})
    

在上面的例子中，我们可以看到组件类有一个名为@Component的装饰器，以及selector和templateUrl等不同的属性。

Angular 中的组件元数据是什么？

组件元数据保存有关当前组件的完整信息，该组件表示作为组件的单个单元，以及其内容，如业务逻辑和视图配置。

为了表示数据，我们应该使用下面解释的一些属性。

选择器

这是组件的唯一标识符，当可以找到同一组件的 URL 及其视图时，用于呈现该组件。

如果我们想要渲染任何组件，那么它是与组件装饰器一起使用的强制性元数据类型之一。

模板网址

它是表示特定组件的可视部分的视图文件 (HTML) 的 URL。基本上，模板 URL 可以包含与组件一起维护的 HTML 文件的 URL。

模板

我们已经看到了接受视图文件的 URL 路径的元数据templateUrl，但并不总是必须使用单独的文件来表示视图。

我们还可以使用模板元数据直接在组件中指定视图内容。

提供者

基本上，它是提供程序的值数组，用于提供当前组件正在使用的服务。因此，它不是必需属性，如果我们不需要它，我们可以忽略它。

如何在 Angular 中创建组件

我们可以用不同的方式创建组件，其中一种方法是使用以下命令的Angular CLI 。

      ng new component <component_name>

例如：

      ng new component app

这是在 Angular 中创建组件的基本命令。现在，让我们看看我们的新组件是什么样子。

App 组件代码（app.component.ts）

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

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Hello World in Angular';
}
    

以上是我们的组件文件。除了装饰器，我们还使用了templateUrl来表示当前组件的视图。视图文件将如下所示：

视图代码（app.component.html）

      <p>
  Hello Angular: {{name}}
</p>
    

如您所见，在视图文件中，我们只显示纯文本。因此，我们可以根据业务需求随意处理 HTML 内容。

组件模板

为了渲染组件的视图，我们需要定义不同的 HTML 控件。在 Angular 2+ 中是可能的，并且被称为 View。View只是一个特定 Angular 组件的 HTML 文件。

我们可以用两种不同的方式创建 HTML 文件以及组件。下面将进行解释。

第一种方法

第一种方法是创建一个 HTML 文件并传递该文件的 URL，如下所示：

演示.组件.html

      <table border="5">
  <!-- First Row -->
  <tr>
    <td>Column 1 Row 1</td>
    <td>Column 2 Row 1</td>
    <td>Column 3 Row 1</td>
  </tr>
  <!-- Second Row -->
  <tr>
    <td>Column 1 Row 2</td>
    <td>Column 2 Row 2</td>
    <td>Column 3 Row 2</td>
  </tr>
</table>
    

创建上述 HTML 文件后，我们可以将模板 URL 传递给组件，如下所示：

演示.组件.ts

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

@Component({
  selector: 'demo',
  // Passing template URL
  templateUrl: './demo.component.html',
})
export class AppComponent {
  name = 'Using template in Angular';
}
    

我们可以看到，有一个名为templateUrl的元数据属性，它接受组件模板（视图）的 URL，并将 HTML 内容呈现给浏览器

第二种方法

第二种方法是使用 Angular CLI 命令生成组件，其中将自动创建模板（视图）文件。下面是生成测试组件的简单命令。

      ng new component test

执行上述 CLI 命令后，我们可以看到自动创建了三个不同的文件。它们列在下面。

测试.组件.ts
测试.组件.html
测试.组件.css

当我们打开test.component.html时，会自动生成一个<p>标签，并且它会在运行 Angular 应用时呈现。

这是渲染组件模板的两种不同方法，但我们也可以在组件本身内部编写内联 HTML 内容。

内联组件模板

为了在组件内部写入模板内容，我们可以利用模板元数据。

它接受 HTML 内容，就像我们在单独的文件内使用不同的 HTML 控件一样，但不同之处在于，如果我们的元素数量很少，那么我们就不需要创建单独的文件并在组件内指定它。

确保使用反引号（“”）以及 HTML 元素指定 HTML 内容，如下例所示。

我的应用程序.组件.ts

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

@Component({
  selector: 'my-app',
  // Inline template
  template: `<div>
    <p>This is inline template demo
  </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Hello World in Angular';
}
    

在此示例中，我们使用模板元数据属性在 Angular 组件中指定内联模板，但如果您要呈现有意义的 HTML 内容，建议使用单独的 HTML 文件。否则，将模板和业务逻辑管理到单个组件文件中会很困难。

组件样式

组件的样式是关键的构建块，它直接影响用户对应用程序的接受度 - 是的，用户体验。

Angular 组件允许我们提供一种设置组件样式的方法。这意味着我们可以为特定组件提供不同的 CSS 样式、规则和其他特定于设备的样式配置。

为此，Angular 组件具有根据您的不同需求和要求的元数据属性。这些解释如下。

样式网址

TemplateUrl 属性接受样式表文件的 URL，我们在其中编写了不同 HTML 元素的样式规则。

我们可以像这样将模板样式的文件 URL 提供给组件。

我的应用程序.组件.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  // Using stylesheet URL
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Styling Component in Angular';
}
    

这里app.component.css是样式表文件，我们可以在其中为 HTML 元素编写不同的 CSS 规则和指南，并可以像这样将其应用于组件。

<h2 class="cmp-title_

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

了解组件的用途及其基本部分（模板、类、元数据）

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { Component } from '@angular/core'; @Component({ selector: 'app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Hello World in Angular'; }

<table border="5">  <tr> <td>Column 1 Row 1</td> <td>Column 2 Row 1</td> <td>Column 3 Row 1</td> </tr>  <tr> <td>Column 1 Row 2</td> <td>Column 2 Row 2</td> <td>Column 3 Row 2</td> </tr> </table>

import { Component } from '@angular/core'; @Component({ selector: 'demo', // Passing template URL templateUrl: './demo.component.html', }) export class AppComponent { name = 'Using template in Angular'; }

import { Component } from '@angular/core'; @Component({ selector: 'my-app', // Inline template template: `<div> <p>This is inline template demo </div>`, styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Hello World in Angular'; }

import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', // Using stylesheet URL styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Styling Component in Angular'; }