Angular------组件的基本操作

最新推荐文章于 2024-08-13 17:47:51 发布

Baldwin_KeepMind

最新推荐文章于 2024-08-13 17:47:51 发布

阅读量1.2k

点赞数 1

分类专栏：学习 angular 文章标签： angular

本文最先由Baldwin_Keepmind发表于CSDN，转载请注明出处。作者博客地址：https://yzstu.blog.csdn.net

本文链接：https://blog.csdn.net/shouchenchuan5253/article/details/112447298

版权

本文所有内容基于BaldwinKeepMind的Angular专栏

1. 概述

组件是 Angular 应用的主要构造块。每个组件应当包含以下部分：

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

2. 创建组件

2.1. IDEA创建组件

鼠标光标置于你想要创建组件的文件夹上=>右键=>New=>Angular Schematic=>component=>输入组件名=>ok

这样我们就创建了一个新的组件，并且自动生成了组件的基本组成部分，如下图：
在这里插入图片描述

2.2. Angular CLI创建组件

在终端窗口中，导航到要放置你应用的目录。

运行 ng generate component 命令，其中是新组件的名字。

这条命令的效果与在IDEA中创建组件的效果相同

3. 生命周期

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。

你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。