Rumah > Artikel > hujung hadapan web > 浅谈Angular中组件(@Component)基本知识
本篇文章给大家介绍一下Angular中组件(@Component)基本知识。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
环境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
组件是 Angular 应用的主要构造块。每个组件包括如下部分:
Component可以是一个页面,也可以是一个组件(控件)。总是,是一个页面元素。【相关教程推荐:《angular教程》】
任何一个Component都是NgModule的一部分,这样它就可以被其他应用和其他Component所调用。为了定义Component是NgModule的一个成员之一,开发者应该在NgModule的declarations属性中,将自己开发的Component列出。
另外,通过Component修饰符(也就是@Component)开发者可以配置元数据,这样通过各式各样的Life-Cycle hooks,Components就可以控制他们的运行环境。
基于AngularCLI,可以很方便的创建Component。在要创建Component的目录下,执行如下命令
ng generate component f3fc15c0228dc320ab4107d8220f2b42
e.g. ng generate component MyComponent
AngularCLI会自动生成一个文件夹和4个文件:
对于Component,所有文件名都会自动增加Component后缀,所以不建议618b9d141ce13a9de5ed31e4de8e1aae 中带有‘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。
2.1. 组件模板
组件模板,即HTML部分,可以是一个html文件,也可以是一段html描述,是等价的。Angular 组件需要一个用 template 或 templateUrl 定义的模板。但你不能在组件中同时拥有这两个语句。
1、html 文件方式
@Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', })
2、html代码方式
@Component({ selector: 'app-component-overview', template: '4a249f0d628e2318394fd9b75b4636b1Hello World!473f0a7621bec819994bb5020d29372a', })
在 Angular 中,组件的 CSS 样式被封装进了自己的视图中,而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', encapsulation: ViewEncapsulation.None, styleUrls: ['./my-component.component.css'] })
可以看到,增加了一个encapsulation
属性 (视图封装模式)。通过在组件的元数据上设置视图封装模式,你可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种:
3.1. 特殊的选择器 :host
使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。 :host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。
e.g.
:host { }
3.2. 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; }'] })
ng generate component XXX
可以简写为 ng g c
更多编程相关知识,请访问:编程视频!!
Atas ialah kandungan terperinci 浅谈Angular中组件(@Component)基本知识. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!