Question

我遇到过的有趣问题：在另一个页面中包含组件或页面时，似乎ionViewCanEnter没有触发。如果您直接访问某个页面，它将触发，但使用其选择器将其包含在另一个页面中将导致该页面不触发。我尝试制作一个组件并将其包含在页面中，但无法正常工作。我需要在两个页面上有一个特殊的视图，然后尝试重用代码，决定将我的代码移动到一个组件中并将其包含在两个页面中，但是问题是HTML模板调用了一个函数，而该函数在此之前需要一些异步数据可以回应，所以我需要保留视图，直到接收到该数据。有关如何解决此问题的任何想法？

这是我的组成部分：

import { Component } from '@angular/core';

/**
 * Generated class for the PageStylesComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'page-styles',
  templateUrl: 'page-styles.html'
})
export class PageStylesComponent {

  text: string;

  constructor() {
    console.log('Hello PageStylesComponent Component');
    this.text = 'Hello World';
  }

  ionViewCanEnter(): boolean | Promise<any> {
    return this.auth();
  }

  auth() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(true);
      }, 2000);
    });
  }

}

组件的HTML

{{text}} 我已经将此导入到另一个页面：

<ion-col col-4>
  <page-styles></page-styles>   
</ion-col>

运行其他页面时，我会立即打印出Hello World。此外，控制台不会显示ionViewCanEnter已被触发。我得到：

Hello PageStylesComponent组件 ionViewDidLoad EditStylesPage（另一页）

但是我组件中没有ionViewCanEnter。我一直在进行大量研究，找不到解决方法。

CLI信息：

cli软件包：（/ usr / local / lib / node_modules）

@ ionic / cli-utils：1.19.2 离子（离子CLI）：3.20.0 全局软件包：

cordova（Cordova CLI）：8.0.0 本地软件包：

@ ionic / app-scripts：3.1.2 Cordova平台：android 7.0.0 ios 4.5.4 离子框架：离子角3.9.2 系统：

Android SDK工具：26.1.1 ios部署：1.9.2 节点：v8.10.0 npm：5.6.0 操作系统：macOS High Sierra Xcode：Xcode 9.4.1 Build版本9F2000 其他：

后端：亲感谢您的帮助！

Answer 1

添加@ViewChild，以便您可以访问组件。

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

    constructor(){}

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

    ...
}

和

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

来源：https://ionicframework.com/docs/api/navigation/NavController/

从“根”组件中导航如果要控制怎么办   您的根应用程序组件导航？你不能注入   NavController，因为任何组件都是导航控制器   是根组件的子代，因此无法使用它们   注射。

通过在ion-nav中添加参考变量，可以使用@ViewChild   获取Nav组件的实例，该实例是一个导航   控制器（它扩展了NavController）。 -NavController

ionViewCanEnter在组件中

1 个答案: