了解 Angular 中选择器的用途

2020-01-31 08:00:00 · 飞浪

介绍装饰器用于将类标记为Angular中的组件，并提供信息元数据，定义现有组件可以使用哪些类型的属性。组件将属性作为元数据作为对象，并且对象包含键值对，如选择器、样式或styleUr

介绍

装饰器用于将类标记为 Angular 中的组件，并提供信息元数据，定义现有组件可以使用哪些类型的属性。

组件将属性作为元数据作为对象，并且对象包含键值对，如选择器、样式或 styleUrl。所有这些属性使组件成为 Angular 应用程序的完整可重用块。

在本指南中，我们将了解 Angular 中的 selector 属性以及如何使用它来选择 DOM 中的对象。

Angular 中的选择器是什么？

选择器是我们与组件配置一起使用的对象属性之一。

选择器用于唯一地标识组件树中的每个组件，并且还定义当前组件在 HTML DOM 中的表示方式。

当我们使用 Angular CLI 创建一个新组件时，新创建的组件如下所示。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'This is simple component';
}
    

在app.component.ts中，请注意我们有一个名为selector的属性，以及用于在浏览器中呈现 HTML DOM 树中标识应用程序组件的唯一名称。

一旦我们在浏览器中运行我们的 Angular 应用程序，我们就可以打开浏览器开发人员工具并转到“元素”选项卡，在那里我们可以看到渲染的组件，如下所示。

如您所见，<my-app>首先被渲染，因为 app 组件是我们应用程序的根组件。如果我们有任何子组件，那么它们都会在父选择器内渲染。

基本上，组件的选择器属性只是一个字符串，用于识别 DOM 中的组件或元素。

默认情况下，选择器名称在组件创建时可能以app作为前缀，但我们可以更新它。请记住，两个或多个组件选择器不能相同。

让我们看看在 Angular 中使用选择器的不同方式。

此外，选择器对于保持组件选择器名称和自定义规范的一致性非常有用。

选择器作为元素名称

这是选择器的基本版本，其中选择器名称代表组件作为完整元素。

当我们创建组件时，我们可以设置选择器属性以及适当的名称，以便它可以作为元素呈现到 HTML DOM 树中。

让我们看一个简单的例子，我们创建一个名为app 的简单组件，然后在模板文件中添加一个<table> 。

应用程序.组件.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'This is simple component';
}
    

这里我们有 app 组件以及my-app作为元素名称，以便一旦呈现组件，我们就可以通过其名称识别该组件。

让我们修改文件app.component.html并粘贴以下代码行。

      <table>
	<tr>
		<td>Col 1 Row 1</td>
		<td>Col 2 Row 1</td>
	</tr>
	<tr>
		<td>Col 1 Row 2</td>
		<td>Col 2 Row 2</td>
	</tr>
	<tr>
		<td>Col 1 Row 3</td>
		<td>Col 2 Row 3</td>
	</tr>
</table>
    

现在让我们运行应用程序并从浏览器开发人员工具中打开“元素”选项卡来查看输出，如下所示。

这就是我们的组件如何表示为具有 selector 属性的元素，因此在呈现组件时，子内容将被选择器作为元素名称包围。

这是 Angular 中的常见方法。每个组件都代表一个不同的选择器，以便可以在 HTML DOM 中唯一地标识它。

选择器作为属性

我们已经看过一个如何使用选择器作为元素名称的示例，但我们并不局限于此。我们还可以将选择器用作元素的属性，就像我们与其他 HTML 元素一起使用一样。

记住 HTML 元素使用的属性，例如 name、id、class、href、src、value 和其他不同属性。在 Angular 中，我们还可以使用选择器作为属性。

每当我们想要处理来自 HTML 控件/元素的输入时，这都很容易处理。

我们可以将括号[ ]与选择器一起使用，如下所示。

      selector: '[selector_value]'

现在让我们看一个使用选择器作为属性的简单例子。

应用程序.组件.ts

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

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

我们刚刚使用了一个附加括号以及选择器值[my-app]，所以现在我们必须将选择器用作属性而不是元素。

打开文件index.html并像这样更新<my-app>部分。

      <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div my-app> </div> 
</body>
</html>
    

现在如果我们尝试运行这个例子，输出应该是这样的。

如您在屏幕截图中看到的，div标签现在与选择器一起充当元素。这意味着我们配置的组件选择器充当属性而不是元素。

这就是我们如何通过将附加的[ ]括号与选择器值一起使用来区分作为属性的选择器和作为元素的选择器。

选择器作为一个类

到目前为止，在本指南中，我们已经将选择器用作元素，将选择器用作属性，但我们也可以将选择器用作类。

就像我们上面的例子一样，我们只需要提供选择器名称作为类，元素就会转换为 HTML DOM 中的类。

让我们像这样修改app.component.ts文件。

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

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

我们刚刚修改了选择器属性的单个语句，如下所示。

      selector: '.my-app'

我们在选择器名称前添加了一个点运算符(.)，因此我们可以像这样使用选择器作为类名。

索引.html

      <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <div class = "my-app"> </div> 
</body>
</html>
    

在此 html 文件中，为了指定类名，我们应该使用名为 class 的属性，但正如您所见，我们已经使用选择器名称作为类值。

现在，如果我们打开浏览器开发工具，我们可以在元素选项卡中看到输出。

与div元素一起添加的是类名my-app，这是我们在组件文件中配置的选择器名称。

如果我们将选择器配置为一个类，我们仍然可以将子元素渲染到组件中，就像上面的例子中所做的那样。

结论

在本指南中，我们了解了 Angular 中的选择器是什么以及如何在不同情况下使用它。选择器是唯一标识每个组件的基本属性之一。我们还查看了使用选择器作为元素、属性和类名的示例。请记住，我们必须谨慎使用选择器，大多数情况下它们被用作元素。请继续关注更多有趣的指南。

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

_查看原文

技术指南

阅读全文

了解 Angular 中选择器的用途

杭州电子商务研究院

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

import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'This is simple component'; }

<table> <tr> <td>Col 1 Row 1</td> <td>Col 2 Row 1</td> </tr> <tr> <td>Col 1 Row 2</td> <td>Col 2 Row 2</td> </tr> <tr> <td>Col 1 Row 3</td> <td>Col 2 Row 3</td> </tr> </table>

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

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <div my-app> </div> </body> </html>

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