侧边栏壁纸
博主头像
微笑涛声

一个在编程学习中逐渐变强的孩子! 热爱编程,喜欢软件开发!

  • 累计撰写 131 篇文章
  • 累计创建 63 个标签
  • 累计收到 7 条评论
隐藏侧边栏

前端:Angular框架和Ionic框架的生命周期详解

微笑涛声
2020-04-23 / 0 评论 / 0 点赞 / 453 阅读 / 1,159 字
温馨提示:
本文最后更新于 2021-06-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

一、angular 生命周期钩子

  • ngOnInit()Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件;
  • ngAfterViewInit()初始化完组件视图及其子视图之后调用。
ngOnInit() 钩子是我们用得最频繁的一个,在使用新建组件命令ng g component 组件名称生成一个组件后,就有 ngOnInit() 方法。

ngOnInit() 钩子可以作为初始化时调用一些方法。

ngOnInit() {
//程序初始化时进行调用方法
    this.getNewsList();
  }

  getNewsList(){
    this.newsservice.getNewsList()
      .then((data:any)=>{
        this.nl=new Array();
        this.nl=data;
      })
  }

想要多次执行的方法可以在构造方法constructor里面调用。

二、Ionic生命周期

可以在官方文档里面看到,ionic常用的生命周期有如下6个

  • ionViewDidLoad:当页面加载的时候触发,仅在页面创建的时候触发一次
  • ionViewWillEnter:当将要加载页面时触发
  • ionViewDidEnter:当进入页面时触发
  • ionViewWillLeave:当将要从页面离开时触发
  • ionViewDidLeave:离开页面时触发
  • ionViewWillUnload:当页面元素将要销毁时触发

可以写一个简单的案例

    ionViewDidLoad(){
        console.log('页面即将加载,且只执行一次');
    }
    ionViewWillEnter() {
        console.log('页面即将加载时进入');
    }

    ionViewDidEnter() {
        console.log('进入页面之后');
    }

    ionViewWillLeave() {
        console.log('将要离开页面');
    }

    ionViewDidLeave() {
        console.log('离开页面之后');
    }

    ionViewWillUnload() {
        console.log('即将销毁页面元素');
    }
    
0

评论