【问题标题】:How to call ngOnInit() again in Angular 2?如何在 Angular 2 中再次调用 ngOnInit()?
【发布时间】:2017-12-10 02:11:37
【问题描述】:

请在这段代码中说明,当我调用另一个方法时,如何再次调用ngOnInit()

ngOnInit(): void {
  this.route.params.subscribe((params: Params) => {
    this.model = this.userData;
  });
}

update() {
  this.loading = true;
  this.userService.update(this.model).subscribe(
    (data) => {
      alert('Update successful');
    },
    (error) => {
      alert('Not updated');
      this.loading = false;
    },
  );
  this.user_data();
}

【问题讨论】:

  • 目的是什么?只需将代码移动到另一个方法并从ngOnInit() 调用该方法。 ngOnInit() 为每个方法调用一次。没有办法让它被多次调用。
  • 请解释我更新的代码

标签: angular angular-lifecycle-hooks


【解决方案1】:

ngOnInit 在组件创建后调用。因此您可以创建一个函数并再次调用该函数。这是示例代码。

ngOnInit(): void {
    this.callFun();
}    

update() {
    this.callFun();
    // do code
}

private callFun(){
   // do code
}

【讨论】:

    【解决方案2】:

    您不需要再次调用 ngOnInit。所以问题仍然存在,你真正想要完成什么?您在检索路由参数时遇到问题吗?

     ngOnInit(): void {
          this.route.params.subscribe((params: Params) => {
            this.model=this.userData;
      }); 
    

    您在上述订阅中的代码将自动在每次路由参数更改时重新执行。所以不需要再次手动调用ngOnInit。

    【讨论】:

      【解决方案3】:

      这只是一个函数...

      ngOnInit() {}
      
      secondMethod() { this.ngOnInit(); }
      

      我一直在这样做以重新加载我的数据,从来没有遇到过问题。

      【讨论】:

      • 你不应该从另一个自定义函数调用 ngOnInit 生命周期
      【解决方案4】:

      在我看来有两种选择:

      从另一个函数范围调用 ngOnInit()。但鉴于ngOnInitis an angular core method that belongs to OnInit Interface,我建议不要采用这种方法。

          public ngOnInit() {
                this.route.params.subscribe((params: Params) => {
                this.model=this.userData;
            });      
          }
          
          update() {
                 this.ngOnInit();
          }  
      

      将您的功能分解为另一个函数,使用ngOnInit调用它,然后,可以通过以下方式调用该函数从任何地方发出任何请求:this.<MethodName>();

          public ngOnInit() {
                this.getRouteData();
          }
          
          update() {
                 this.getRouteData(); 
          }
      
          getRouteData() {
            this.route.params.subscribe((params: Params) => {
                this.model=this.userData;
            }); 
          }    
      

      【讨论】:

        【解决方案5】:

        如果目的是在查询参数更新时触发ngOnInit(),则执行以下操作:

        import { Router } from '@angular/router';
        constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false;
        }
        

        【讨论】:

        • 这正是我正在寻找的解决方案。非常感谢你,哈里
        • 但这会影响如果你有routerLink 去其他路线它不会工作。本人亲测
        猜你喜欢
        • 2018-12-14
        • 2017-02-20
        • 1970-01-01
        • 2016-06-26
        • 1970-01-01
        • 2017-04-08
        • 2018-02-02
        • 2017-05-13
        • 1970-01-01
        相关资源
        最近更新 更多