环境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: Visual Studio Code

1. 概述

组件是 Angular 应用的主要构造块。每个组件包括如下部分:

  • 一个 HTML 模板,用于声明页面要渲染的内容
  • 一个用于定义行为的 Typescript 类
  • 一个 CSS 选择器,用于定义组件在模板中的使用方式
  • (可选)要应用在模板上的 CSS 样式

Component可以是一个页面,也可以是一个组件(控件)。总是,是一个页面元素。

任何一个Component都是NgModule的一部分,这样它就可以被其他应用和其他Component所调用。为了定义Component是NgModule的一个成员之一,开发者应该在NgModule的declarations属性中,将自己开发的Component列出。

另外,通过Component修饰符(也就是@Component)开发者可以配置元数据,这样通过各式各样的Life-Cycle hooks,Components就可以控制他们的运行环境。

2. 创建Component

基于AngularCLI,可以很方便的创建Component。在要创建Component的目录下,执行如下命令

ng generate component <component-name>

e.g. ng generate component MyComponent

AngularCLI会自动生成一个文件夹和4个文件:

  • 一个以该组件命名的文件夹(e.g my-component)
  • 一个组件文件 < component-name >.component.ts(e.g my-component.component.ts)
  • 一个模板文件 < component-name >.component.html(e.g my-component.component.html)
  • 一个 CSS 文件, < component-name >.component.css(e.g my-component.component.css)
  • 测试文件 < component-name >.component.spec.ts(e.g my-component.component.spec.ts)

对于Component,所有文件名都会自动增加Component后缀,所以不建议< component-name > 中带有‘component’这个单词。

@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit { constructor() { } ngOnInit(): void {
} }

以上是核心的ts文件,指定了selector(CSS 选择器),template(html)文件,css文件。html/css文件如果需要可以多个component公用。尤其是css,可以看到参数是Array,所以可以制定多个css。

组件模板

组件模板,即HTML部分,可以是一个html文件,也可以是一段html描述,是等价的。Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。

  1. html 文件方式
@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
  1. html代码方式
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
})

视图封装模式

在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。

@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./my-component.component.css']
})

可以看到,增加了一个encapsulation属性 (视图封装模式)。通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种:

  1. Emulated 模式(默认值)通过预处理(并改名)CSS 代码来模拟 Shadow DOM 的行为,以达到把 CSS 样式局限在组件视图中的目的。 更多信息,见附录 1。(说明:只进不出,全局样式能进来,组件样式出不去)
  2. ShadowDom 模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中,组件的样式也被包含在这个 Shadow DOM 中。(说明:不进不出,没有样式能进来,组件样式出不去。)
  3. None 意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说,这跟把组件的样式直接放进 HTML 是一样的。

特殊的选择器 :host

使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。 :host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。

e.g.

:host {
}

inline-styles

默认AngularCLI生成的component,css在一个单独文件中。当然,同html模板类似,如果需要,你也可以制定css样式写在ts中, 不单独放到一个文件中。命令:ng generate component MyComponent --inline-style

生成component如下

@Component({
selector: 'app-my-component',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})

3. 总结

---------------- END ----------------

======================

Angular入门到精通系列教程(7)- 组件(@Component)基本知识的更多相关文章

  1. Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目

    1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目 创建第一个anuglar项目 A ...

  2. Angular入门到精通系列教程(6)- Angular的升级

    1. 摘要 2. https://update.angular.io/ 3. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 npm ...

  3. Angular入门到精通系列教程(10)- 指令(Directive)

    1. 摘要 2. 组件与指令之间的关系 2.1. 指令的种类 3. Angular 中指令的用途 4. 指令举例 4.1. 指令功能 4.2. Anuglar CLI生成基本文件 4.3. Direc ...

  4. Angular入门到精通系列教程(11)- 模块(NgModule),延迟加载模块

    1. 摘要 2. NgModule举例.说明 3. Angular CLI生成模块 4. 延迟加载模块 5. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 No ...

  5. Angular入门到精通系列教程(13)- 路由守卫(Route Guards)

    1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...

  6. Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布

    目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...

  7. 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)

    办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...

  8. Laravel 从入门到精通系列教程

    转载;https://laravelacademy.org/laravel-tutorial-5_7 适用于 Laravel 5.5.5.6.5.7 版本,本系列教程将围绕一个 LTS 版本,然后采取 ...

  9. Django简介--Django从入门到精通系列教程

    该系列教程系个人原创,并同步发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

随机推荐

  1. python作业-2048小游戏

    需了解的知识 Pygame中的各个模块及其功能: Pygame.init():初始化所有导入的模块 pygame.display: pygame.display.init()  -  初始化 disp ...

  2. Python循环语句代码详解:while、for、break

    1 while循环 循环语句是程序设计中常用的语句之一.任何编程语言都有while循环,Python也不例外.while循环的格式如下所示.  while(表达式):       -   else:  ...

  3. python 做回归

    1 一元线性回归 线性回归是一种简单的模型,但受到广泛应用,比如预测商品价格,成本评估等,都可以用一元线性模型.y = f(x) 叫做一元函数,回归意思就是根据已知数据复原某些值,线性回归(regre ...

  4. 正方形和球体,利用蒙特卡洛计算pi值

    clc; clear all; close all; R = 3; time = 10000; origin = [0,0,0]; %%======绘制球体====== t=linspace(0,pi ...

  5. 服务器安装ESXI6.7

    1    从官网下载ESXI镜像文件到本地 https://my.vmware.com/web/vmware/details?downloadGroup=ESXI670&productId=7 ...

  6. HCIP -- OSPF 总结

    OSPF:Open Shortest path First  :开方式最短路径优先 一.基础知识: 1.使用范围:IGP 2.协议算法特点:链路状态型路由协议,SPF算法 3.协议是否传递网络掩码:是 ...

  7. ASP.NET Core 3.1使用JWT认证Token授权 以及刷新Token

    传统Session所暴露的问题 Session: 用户每次在计算机身份认证之后,在服务器内存中会存放一个session,在客户端会保存一个cookie,以便在下次用户请求时进行身份核验.但是这样就暴露 ...

  8. Git的使用以及命令

    个人常用命令 git初始化操作 git init 把当前的目录变成git仓库,生成隐藏.git文件. git remote add origin url 把本地仓库的内容推送到GitHub仓库. gi ...

  9. 前端技术VUE 的前世今生从PC 走向移动

    一.Vue的前世 Vue 框架诞生于2014年,他的作者为中国人–尤雨溪(江苏无锡人).Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的 ...

  10. 微软自动化测试工具palywright

    前言 我们介绍许多e2e的自动化测试工具 一类是基于 Selenium 的测试框架: robot framework gauge SeleniumBase seldom(我自己维护的) 另一类是基于J ...