Angular概念_组件

组件用来描述用户界面。由三部分组成：

• 一个 HTML 模板，定义页面要渲染的内容（静态页面）

• 一个用于定义行为的 TypeScript 类（数据+交互逻辑）

• （可选）要应用在模板上的 CSS 样式（页面样式）

在 Angular 应用中至少要有一个根组件。

组件类是由 Component 装饰器函数装饰的类。@Component() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个组件。

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

@Component({
  selector: 'app-root',//在html中的标签名
  templateUrl: './app.component.html',//视图模板的文件地址
  styleUrls: ['./app.component.css']//样式文件的地址集合
})
export class AppComponent {
  title = 'angular-test1';
}

• selector：是一个 选择器，告诉angular如何在模板中使用标签的形式使用该组件。一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 比如，如果应用的 HTML 中包含 <app-root></app-root>，Angular 就会在这些标签中插入一个 AppComponent 实例的视图。（你可以把它看作是告诉angular我们定义了这样名字的一个新标签）

• templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用 template 属性的值来提供内联的 HTML 模板。 这个模板定义了该组件的页面视图。

• styleUrls：声明该组件的HTML模板的CSS类，外部样式文件相对于这个组件文件的地址集合，接收一个数组，可以引入多个样式文件。当然你也可以使用styles属性为该组件设置内联样式。

模块与组件关系

NgModule 为组件提供了编译的上下文环境。

NgModule是组件的容器，要想访问一个组件，首先要获得该组件所在模块的访问权。

新添加的组件，必须在NgModule中声明，相当于告诉Angular你新定义了哪些HTML标签，并有哪些附加功能，否则Angular无法找到你新添加的组件，你的组件功能也就无法生效。

实时效果反馈

1.下列描述错误的是：

A 模块是用@NgModule()装饰的类

B 模块是组件的容器

C 组件是模块的容器

D 定义完的组件要在模块中声明

答案

1=>C