Angular自学笔记（?）生命周期

最新推荐文章于 2025-07-09 15:19:24 发布

yusirxiaer

最新推荐文章于 2025-07-09 15:19:24 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular自学笔记

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/113838992

Angular自学笔记专栏收录该内容

15 篇文章 ¥9.90 ¥99.00

订阅专栏

这篇博客详细介绍了Angular组件的生命周期，包括ngOnChanges、ngOnInit、ngOnDestroy等关键钩子的使用场景和触发顺序。作者强调ngOnInit是获取初始化数据的最佳时机，而ngOnDestroy用于清理资源。此外，还讨论了AfterContent系列钩子在组件内容变化时的调用情况。

从实例化组件，渲染组件模板时，各声明周期就已开始

ngOnChanges

输入属性发生变化是触发，但组件内部改变输入属性是不会触发的

import {
   
    Component, Input, OnInit, OnChanges } from '@angular/core';

@Component({
   
   
  selector

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yusirxiaer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

Angular CLI ng 指令指南

YUSIR 完美CODING世界

01-25

2165

Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上

useEffect中使用异步函数

YUSIR 完美CODING世界

06-18

1591

useEffect是不能直接用 async await 语法糖的

参与评论您还未登录，请先登录后发表或查看评论

Angular学习笔记 生命周期篇

qq_25736715的博客

10-28

198

八大生命周期 ngOnChanges() 当 Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象当被绑定的输入属性的值发生变化时调用，在Angular6以下的版本中,首次调用一定会发生在 ngOnInit() 之前。 ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在...

[Angular学习笔记]Angular生命周期

salt_fash的博客

07-13

196

生命周期是什么？ 生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法。 生命周期的顺序当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：钩子用途及时机 ngOnChanges() @inp...

angular自学笔记

MonsterK666的博客

08-31

1249

Angular 一、初步上手 1.1、介绍 Angualr是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google 的多款产品当中。根据项目数统计angular (1.x 、2.x 、 4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。 Angular基于TypeScript，和react、vue相比 Angular更适合中大型企业级项目。目前2019年12月25日a

Go语言自学笔记(1.7-2.2)

最新发布

weixin_42697921的博客

07-09

305

修改Lissajour服务，从URL读取变量，比如你可以访问 http://localhost:8000/?cycles=20 这个URL，这样访问可以将程序里的cycles默认的5修改为20。本章对Go语言做了一些介绍，Go语言很多方面在有限的篇幅中无法覆盖到。本节会把没有讲到的内容也做一些简单的介绍，这样读者在读到完整的内容之前，可以有个简单的印象。在每一个函数之前写一个说明函数行为的注释也是一个好习惯。这些惯例很重要，因为这些内容会被像godoc这样的工具检测到，并且在执行命令时显示这些注释。

工作学习angular5笔记

M612a34的博客

03-12

3175

大三上学期，在学校实验室自学的angular1，如今马上毕业了，公司里已经用上了angular5。学起来！！！组件、服务、路由、指令 1、环境搭建和快速建立项目当然，angular5是建立在node6.9版本和npm3.3版本以这两个上的。先全局安装这两个软件吧。1.1、设置开发环境全局安装angular5脚手架。Angular CLI ：npm install -g @angular/c...

angular2自学笔记---官网项目（一）

weixin_30621919的博客

01-08

109

1.单向数据绑定的‘插值表达式’ angular中最典型的数据显示方式：把HTML模板（template）的控件绑定到angular组件的属性（component相当于一个构造函数，下面例子中的这个构造函数有name、title、和hero三个属性）简单来说就是把组件的属性名放到显示曾{{属性名}}中，angular负责喷到页面中；angular从组件中提取属性插入浏览器，然后angu...

AngularJS 学习笔记（五）--- 包含和动画

2401_84434086的博客

06-18

332

这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！// 包含AngularJS 代码// b.html 文件的内容。

angular2自学笔记（二）---路由、服务等八大主要构造块

weixin_30547797的博客

01-12

125

angular的思想：总是把数据访问工作委托给一个支持性服务类。Angular 应用的：用 Angular 扩展语法编写 HTML 模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。angular2的八大主要构造块：模块 (module)组...

react自学笔记总结不间断更新

weixin_30760895的博客

01-07

101

React React 是由Facfbook维护的一套框架，并且引用到instagram React只是我们熟悉MVC框中的V层，只是视图层面的一个框架，只有俩个半api(createClass,createElement,render) React与Angular的区别 React: 性能好，单向数据绑定，不是完整的框架。 ...

压缩文件中的自学笔记内容总结

5. 项目管理与软件工程：自学笔记中也可能包含软件开发的整个生命周期，包括需求分析、系统设计、编码、测试、部署和维护等软件工程知识，以及敏捷开发、Scrum和Kanban等项目管理方法。 6. 云计算与大数据技术：...

前端自学的一些笔记

07-11

在前端开发领域，JavaWeb和前端技术是两个密切相关但又有区别...以上是前端自学笔记中涵盖的主要知识点，掌握这些内容，你将具备成为一名合格前端开发者的坚实基础。持续学习、实践和参与项目，你的技能将会不断精进。

前端学习笔记整理与持续更新

“框架”则是当前前端生态的重要特征，笔记中极有可能包含对主流前端框架如React、Vue、Angular的学习心得，例如React中的组件生命周期、Hooks用法、状态管理（Redux/Zustand）、虚拟DOM原理；Vue中的响应式系统、...

Angular自学笔记（?）TemplateRef和ViewContainerRef

YUSIR 完美CODING世界

02-16

605

ElementRef 由于ng是跨平台的为了减少视图层和渲染层的耦合也为了让ng更适应多平台，ng帮我们封装了ElementRef，我们可以通过ElementRef拿到native元素(在浏览器中也就是我们常说的DOM元素) 下面我们看一段代码 import { Component, ElementRef, AfterViewInit } from '@angular/core'; @Component ({ selector:'my-app', t

Angular rxjs operators 笔记

YUSIR 完美CODING世界

02-16

519

toArray /* toArray把结果都塞到数组里去 */ const source = interval(1000); const example = source.pipe( take(10), toArray() ); example.subscribe(val => console.log(val)); // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] toArray /* pairwise把相邻的两个流组成数组 */

Angular自学笔记（一）ngModule 元数据

YUSIR 完美CODING世界

02-16

377

工作硬上开发angular项目，好难啊，上网搜资料教程真的贼少，吐槽真的没什么人用angular，自己学习到处搜集整理的笔记，分享出来，方便查看理解总结。应该适用于angular11系列（更新真快，反正我也不知道之前低版本不同手动狗头）什么是angular module(ngModule)? angular module就是一个普通的类，但是这个类，一旦被@NgModule所装饰，那这个类就可以被称为angular module @NgModule元数据 @NgModule 获取一个元数据对象，它会告

Angular自学笔记（?）ContentChild和ContentChildren

YUSIR 完美CODING世界

02-16

371

ContentChild 用法类似ViewChild, 获取投影中到组件或指令还有元素dom等获取投影中但组件 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; @Component({ selector: 'app-content-child-panel', templateUrl: './content-child-panel.component.html' }) ex

Angular 内容投影 II

YUSIR 完美CODING世界

12-06

319

内容投影是一种模式，你可以在其中插入或投影要在另一个组件中使用的内容。简单来说，angular的内容投影就相当于vue的内容插槽slot。所有一下就能懂了。 1、单插槽内容投影单插槽内容投影是指创建一个组件，你可以在其中投影一个组件。如果只有一个ng-content，不需要select属性。 2、多插槽内容投影一个组件可以具有多个插槽。每个插槽可以指定一个 CSS 选择器，该选择器会决定将哪些内容放入该插槽。将select属性添加到<ng-content>元素。 Ang...