Web-Angular的Components组件

组件（Components）

        组件是 Angular 的一种构造，它定义了屏幕上应该显示什么内容。它通过指定一个标签名来显示内容，并在标签中替换相应的内容。它通过更新 DOM 来使浏览器可以立即显示指定的 HTML。

        下面是一个非常简单的组件定义。这个组件只显示一个标题（<h1> 标签）和一段文本。

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello World</h1>
             <p>Welcome to Angular<p>`,
})

export class AppComponent { }

        请注意以下关于这个定义的内容：

1. Typescript 的 import 语句包含了 Angular 组件处理代码，用于 Typescript 编译器。@angular/ 目录实际上不存在，@angular 是根据配置信息转换为真实目录的名称。
2. @Component 指令是一个 Angular 指令，由 Angular 处理器将其转换为 Typescript 代码。@Component 指令及其包含的参数（在 ( 和 ) 之间的内容）应用于指令后的第一个 Typescript 类定义。在这个例子中，就是 AppComponent 类。@Component 指令必须始终在类定义之前。
3. @Component 指令中的 JavaScript 对象的 selector 属性指定了与组件关联的标签名。在这种情况下，<app-root> 是将由 Angular 更新的标签。在前面的部分的 index.html 示例中，你可以看到这个标签。
4. JavaScript 对象中的 template 属性指定了要替换由 selector 属性指定的标签的 HTML 代码。在这个例子中，它是一个简单的静态 HTML 序列。你也可以将模板指定为一个单独的文件，并使用 templateUrl 属性引用文件名。在活动1和2的应用程序中，你将看到使用了 templateUrl 属性。为了减少需要编辑的文件数量，我们将在我们的示例应用程序中使用一个简单的模板。
5. 注意我们如何使用多行字符串来定义模板。这是通过反引号（`）而不是普通的引号（'）来编码的。Angular 将解析该字符串以查找特定的 Angular 代码，尽管这个例子中没有特定的代码。
6. 在这个示例中，AppComponent 类是空的，但在更复杂的情况下，它可能包含变量。编码约定是将组件命名为 xxxComponent，并将定义放在一个名为 xxx.component.ts 的文件中，其中 xxx 是组件的名称。

        以上代码在浏览器中的显示如下所示。所有材料都在 Chrome 浏览器中显示，如果你使用不同的浏览器，可能会有些不同。

        需要注意的是，Angular 代码主要位于模板元素的字符串中，但有些代码可能位于其他位置。其余的部分只是 Typescript 代码，但会引用 Angular 对象。@Component 和其他 Angular 指令实际上是 Typescript 的装饰器。我们在 Typescript 主题中没有涉及这些内容，但它们通过将函数应用于装饰器后面的 Typescript 定义来工作。我们不需要关注技术细节，因为我们不会研究内部或编写装饰器。@Component 装饰器使用给定的 JavaScript 对象将所需的 Angular 属性和方法（元数据）添加到后面的类定义中，这样我们就不必自己编写它们。隐藏实现细节使我们能够集中精力关注我们希望为组件设置的高级属性。随着进展，你将看到其他 Angular 装饰器。

        现在，我们将修改上面的简单示例，在模板字符串中插入一些 Angular 代码。仔细查看下面模板和 AppComponent 类的更改。

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello {{name}}</h1>
             <p>Welcome to Angular<p>`,
})
  
export class AppComponent {
  name = "Barry";
}

        现在将显示如下。

        在这里，我们向我们的类引入了一个名为 name 的属性，并将 Angular 代码 {{name}} 插入到我们的模板中。{{ 和 }} 的语法意味着该属性是从其中的变量加载的。在这种情况下，它是名称属性，但它可以是任何 JavaScript 引用或函数调用。Angular 有其他的方法来构建要显示的 HTML。我们将单独介绍这些方法。