【问题标题】:Ionic 2 / Angular 2 component lifecycle hooksIonic 2 / Angular 2 组件生命周期钩子
【发布时间】:2017-07-30 21:58:13
【问题描述】:

我在页面中有一个组件,每次导航到该页面时我都需要连接到该组件。它包含一个 mapbox 地图,我发现如果用户使用注册页面注册并拉起键盘然后返回到地图页面地图 div 较小,因为用户在他们的电话。我希望这是有道理的?

我已经尝试了此处列出的所有钩子https://angular.io/guide/lifecycle-hooks,但每次导航到页面时它们都不会触发。

任何帮助都会很棒。

【问题讨论】:

  • 找到成功了吗?
  • 还没有,可能需要使用页面事件挂钩来调用组件中的方法。不是很干净。

标签: angular events ionic2 hook lifecycle


【解决方案1】:

试试:ionViewDidEnter(),连同@ViewChild。使用@ViewChild,您可以访问该组件。

来自 Ionic docs:
“当页面完全进入并且现在是活动页面时,ionViewDidEnter() 将触发。无论是第一次加载还是缓存页面,都会触发此事件。”

这将使您可以在每次导航到页面时调用组件上的函数。

父页面 TS:

@Component({
    selector: 'parent-page',
    templateURL: 'parent-page.html'
})
export class ParentPage{
    @ViewChild('myComponent') myComponent;

    constructor(){}

    ionViewDidEnter(){
        this.myComponent.someFunc();
    }

    ...
}

父页面 HTML:

<ion-content>
    ...
    <child-component #myComponent></child-component>
    ...
</ion-content>

【讨论】:

  • ionViewDidEnter 只在页面而不是组件上触发?我想我将不得不使用页面事件来调用组件中的方法?
  • 一个页面就是一个组件
  • 是的,你没关注我吧?一个页面是一个组件,但一个页面是一个组件的扩展,只有一个页面有 ionViewDidEnter?组件只有这些钩子angular.io/guide/lifecycle-hooks。如您所见,没有 ionViewDidEnter。
  • 感谢您的帮助@robbannn,但 ionViewDidEnter 在组件内部什么也不做。它不会触发。
  • ionViewDidEnter(){ console.log('Hello Home Map Provider, did enter hook'); } 不会在组件中触发 :(
猜你喜欢
  • 1970-01-01
  • 2017-01-18
  • 2017-11-13
  • 2017-03-29
  • 1970-01-01
  • 1970-01-01
  • 2017-11-22
  • 2018-04-16
相关资源
最近更新 更多