(精华)2020年8月4日 Angular 生命周期详解
发布日期:2021-06-29 15:08:51 浏览次数:3 分类:技术文章

本文共 1542 字,大约阅读时间需要 5 分钟。

import {
Component, OnInit, Input, EventEmitter } from '@angular/core';// v-on:event = 'getData()'@Component({
selector: 'app-lifecycle', templateUrl: './lifecycle.component.html', styleUrls: ['./lifecycle.component.less'], inputs: ['titleV:title', 'category', 'hello'], outputs: ['city1:city'] // 别名的方式: 别名:接受的属性名})export class LifecycleComponent implements OnInit {
// @Input('title') titleV: any; // @Input('category') category: any; // @Input('hello') hello: any; public city1 = new EventEmitter(); public msg: any = '111'; public userinfo: string = 'a'; oldUserinfo: string = ''; constructor() {
console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外,什么都不应该做') } ngOnChanges() {
console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)'); } ngOnInit() {
console.log('02ngOnInit执行了--- 请求数据一般放在这个里面'); } ngDoCheck() {
//写一些自定义的操作 console.log('03ngDoCheck执行了---检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应'); } ngAfterContentInit() {
console.log('04ngAfterContentInit执行了---在组件内容初始化之后调用'); } ngAfterContentChecked() {
console.log('05ngAfterContentChecked执行了---组件每次检查内容时调用'); } ngAfterViewInit(): void {
console.log('06 ngAfterViewInit执行了----组件相应的视图初始化之后调用(dom操作放在这个里面)'); } ngAfterViewChecked() {
// 组件每次检查视图时调用 console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用'); } ngOnDestroy() {
console.log('08ngOnDestroy执行了····'); //组件被销毁之前,如果有的用户信息填了部分, 希望回来的时候还是帮忙自动填上 , 可以把已经填写的再补充上 } changeMsg() {
this.msg = "数据改变了"; }}

转载地址:https://codeboy.blog.csdn.net/article/details/107803250 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:2021-05-22 .NET高级班 01-泛型
下一篇:(精华)2020年8月4日 Angular 父组件和子组件相互传参

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月19日 23时23分35秒