组件

组件是构成Angular应用的基本组成部分，一个Angular应用可以看作是一棵由组件组成的树。

使用 Angular-cli 创建组件

运行 ng generate component <component-name> 命令，其中 <component-name> 是组件的名字，也可以采用简写的形式ng g c <component-name>。

默认情况下，执行完该命令会创建以下内容：

• 一个以该组件命名的文件夹
• 一个组件文件 <component-name>.component.ts
• 一个模板文件 <component-name>.component.html
• 一个 CSS 文件 <component-name>.component.css
• 将新创建的组件添加到NgModule的声明中

例如：我们一起来创建一个组件名称叫做product-list的组件

执行以下命令：ng g c product-list

指定组件选择器

打开生成的<component-name>.component.ts组件文件，在 @Component 装饰器中添加一个 selector 属性来指定组件的选择器，该属性接收一个字符串的值。即声明如何在html中如何使用该组件。

默认情况下，通过Angular CLI生成的组件的选择器命名为<prefix-component-name>，其中prefix为用于生成组件选择器的前缀，默认是app。

xxxxxxxxxx
@Component({
  selector: 'app-product-list',
})

实时效果反馈

1.一个组件不包含：

A 选择器

B 模板

C 组件类

D 模块

2.如何在html中使用一个组件：

A 使用<选择器名称></选择器名称>

B 使用<组件类名称></组件类名称>

答案

1=>D 2=>A