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

一、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('即将销毁页面元素');
    }

赞(2) 打赏
未经允许不得转载:微笑涛声 » 前端:Angular框架和Ionic框架的生命周期详解
分享到:
标签:

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏