Angular(二) - 组件Component

• 1. 组件Component示例
• 2. Component常用的几个选项
• 3. Component全部的选项
  • 3.1 继承自@Directive装饰器的选项
  • 3.2 @Component自己特有的选项
• 4. 自定义component

1. 组件Component示例

组件是由一个装饰器@Component来声明的，继承自@Directive

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

@Component({
  selector: 'app-root233', // 这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化
  templateUrl: './app.component.html', // 指定html模板
  styleUrls: ['./app.component.css'] // 指定css
})
export class AppComponent {
  title = 'angularapp-2'; // 这里定义的title和enn可以在html中{{ title }}使用
  enn = true
}

2. Component常用的几个选项

@Component最常用的几个选项是:

• selector：这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化。
• template：组件的内联模板，为组件展示的内容，一般内容比较少时使用。如果提供了它，就不要再用 templateUrl 提供模板了
• templateUrl：组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。
• providers ：使用一个 令牌 配置该指令或组件的 注入器，该令牌会映射到一个依赖项的提供商
• exportAs ：一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们

3. Component全部的选项

3.1 继承自@Directive装饰器的选项

3.2 @Component自己特有的选项

4. 自定义component

angular提供了命令行可以生成组件，不用手动创建，下面是一个例子

# 在app/component文件夹下生成一个叫custom的组件
ng g component component/custom

生成出来的结果