angular-component

Introduction

Component（组件）是Angular中的最小单元，通常来说，一个Component包含以下几个部分：

选择器
模板
样式

这三者中，哪个都不是必须的，但是至少要有模板。
我们可以使用Angular CLI来生成一个Component，比如：

1	ng generate component product

或者

1	ng g c product

生成后的组件如下

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

@Component({
  selector: 'product', // 选择器
  templateUrl: './product.component.html', // 模板
  styleUrls: ['./product.component.less'] // 样式
})
export class ProductComponent {}

选择器

选择器是用来引用当前Component的，比如其他组件若想使用Product组件的话，那么可以在其他组件的模板中使用<product></product>来引用Product组件。选择器是给别人用的，组件本身并不使用自己的选择器。

1 2	<!-- other.component.html --> <product></product>

Angular中的选择器是CSS选择器，可以是标签选择器、类选择器、属性选择器等等, 一般来说, 组件通常使用标签选择器,指令通常使用属性选择器, 其他类型的选择器使用较少, 但是也是可以的。比如使用类选择器来实现Product组件：

// product.component.ts
@Component({
  selector: '.product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.less']
})

1 2	<!-- other.component.html --> <div class="product"></div>

运行效果是一样的, 选择器本质是Directive上的属性,而Component是Directive的一个特例, 所以Component也可以使用选择器。关于选择器的详情,请看这里

注意： 选择器不是必须的，一个组件可以没有选择器，这样的组件只能通过路由来访问，或者动态加载。

模板

模板是Component的视图，可以是HTML文件模板（比如上面的Product组件），也可以是内联模板。内联模板一般使用模版字符串(``)，因为模板字符串可以支持多行。

@Component({
  selector: 'product',
  template: `<div>Product works</div>`
})

这样的话，就不需要product.component.html文件了。通常来说，如果模板的内容较多，还是存放到文件中比较好，这样方便维护。

样式

样式是Component的样式，Angular支持多文件样式，单文件样式以及内联样式：

多文件样式

@Component({
  selector: 'product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.less', './product.item.css']
})

单文件样式

@Component({
  selector: 'product',
  templateUrl: './product.component.html',
  styleUrl: './product.component.less'
})

内联样式

@Component({
  selector: 'product',
  templateUrl: './product.component.html',
  styles: ['div { color: red; }']
})

这样的话，就不需要product.component.less文件了。通常来说，如果样式较多，还是存放到文件中比较好, 样式是依附于模板的，如果一个组件没有模板，那么也就没有样式。

对于一个Component来说：

只有component.ts文件是必须的。
component.html和component.less是可选的, 可以使用内联模板和内联样式代替，也可以干脆没有。
可以没有selector(选择器)，但是这样的Component只能通过路由来访问，或者动态加载。

一个极简组件：这个组件什么也不显示，没有样式，也没有选择器。只能在路由中使用。可以在ngOnInit中添加一些逻辑，比如用来弹出popup等。

1
2
3

@Component({
  template: ''
})

component vs module

在Angular中，非Standalone组件必须隶属于一个NgModule，也就是必须在一个module的declarations中声明，否则无法使用该组件。
非Standalone组件至多能在一个module中声明，如果其他module也要使用这个组件，那么需要将这个组件声明在其module的exports中，然后在其他module中引入这个module。