标签: ionic4

在Ionic 3中,解雇模态非常简单:

constructor(viewCtrl: ViewController) {
    this.viewCtrl.dismiss()
}

在Ionic 4中,我无法导入ViewController(或者说准确,我的IDE尝试导入一种ViewController).

我想知道解雇模态的新方法是什么.

我有一个 Ionic 4 应用程序，我想要一个透明的标题。Ionic 文档指出必须将“全屏”添加到离子内容中，并且必须将“半透明”添加到离子工具栏。

这不起作用，并且始终将工具栏留在顶部。我也将其添加到 css 中：

ion-toolbar {
   --background: transparent;
   --ion-color-base: transparent !important;
}

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

我能找到的实现透明标题效果的唯一方法是当我转到 chrome 中的 Shadow DOM 并向类“inner-scroll”添加背景属性时

但是，此类中没有与背景颜色相关的变量，因此我无法使用此方法更改背景。

我怎样才能让这个透明的标题/工具栏工作！？

解决方案：

对于遇到此问题的其他任何人 - 文档根本不清楚。要获得完全透明的功能标头：

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

没有在css中添加以下内容：

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

该文档仅指定了 HTML 方面的内容，但是对于 Ionic 中的新 Shadow DOM，必须使用变量来更改大多数 Ionic 组件样式。

当用户点击ion-back-button时，我想停止从一个页面导航到另一个页面。我有一些验证/检查要执行，具体取决于哪个应用程序将决定是否允许后退操作。

我刚刚设置了 Ionic 4 项目，并且有 Angular 7 版本，但我想将 Angular 7 版本更新为 8，我正在运行以下 cmd 但显示错误。

我正在运行的命令：

ng 更新 @angular/cli @angular/core

npm install --save-dev @angular-devkit/build-angular

即将出现的错误：

无法从“/home/Projects/myProjectName”找到模块“@angular-devkit/build-angular”。错误：无法从“/home/Projects/myProjectName”中找到模块“@angular-devkit/build-angular”。

任何帮助深表感谢。

在模拟器或设备上运行我的 Ionic 4 应用程序时，我似乎在使用配置标志和 livereload 标志时遇到问题。我根据此处的文档设置我的环境：https : //ionicframework.com/docs/cli/commands/cordova-run

和这里：

https://ionicframework.com/docs/appflow/quickstart/environment

此 cli 命令将正确设置环境：

ionic cordova emulate android --configuration=qa

这将正确运行 livereload：

ionic cordova emulate android --livereload

但是当我尝试组合标志时：

ionic cordova emulate android --livereload --configuration=qa

我收到一个错误：数据路径“”不应该有额外的属性（浏览器目标）。

如果有帮助，这是我的离子信息，任何见解将不胜感激：

Ionic:

   Ionic CLI                     : 5.4.2
   Ionic Framework               : @ionic/angular 4.11.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.2, (and 20 other …

我正在尝试将我的离子应用程序从科尔多瓦迁移到电容器。

但是我在 Android 构建中遇到错误。

android\capacitor-cordova-android-plugins\src\main\java\nl\xservices\plugins\FileProvider.java:4: error: package android.support.v4.content does not exist
public class FileProvider extends android.support.v4.content.FileProvider {

有谁知道如何解决这个问题？

我正在做一个Ionic 4项目，我已经生成了一个tabs项目。

我要做的是创建一个登录页面，这是默认页面。

用户成功登录后，我想导航至选项卡。

当我尝试执行此操作时，出现错误：

Error: Cannot match any routes. URL Segment: 'tabs'

这些是我的路线：

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];

在我的登录页面中，我有一个按钮，如下所示：

<ion-button expand="block" [href]="'tabs'" color="light" fill="outline">Sign in</ion-button>

当我生成其他页面时，我可以使用相同的方式导航到该页面。

我想知道这是否是常见问题。我ion-title不在Android工具栏中。

我用谷歌搜索，但找不到离子4的任何东西，我发现是离子3的很好的解决方案。

在这里是：https : //stackoverflow.com/a/30021395/4983589

我想知道是否有人在ionic4中做到这一点？

这是一张在android上的图片：

我有一个标准的Ionic 4页面（主页），该页面创建一个使用组件（BusinessDetails）和一个按钮的弹出窗口，该按钮重定向到新页面（RequestTurn）。但是，当我单击该按钮时，弹出窗口不会消失，而是呈现在我的RequestTurn页面顶部。我想我需要从组件（BusinessDetails）中手动关闭它，但是我不知道如何从那里访问弹出窗口的实例，因为它是在主页中创建的。有没有办法做到这一点？

home.page.ts

presentModal(business:Business, event: Event) {
this.popoverController.create(({
    component: BusinessDetailsComponent,
    cssClass: "business-popover",
    showBackdrop: true,
    componentProps: {
        business: business
    }
}) as any).then(popover => popover.present()); }

business-detail.component.ts

goToRequestTurn(id: string) {
   //Need to dismiss popver here (?)
   this.router.navigateByUrl(`/request-turn/${id}`); }

谢谢你的帮助。

我正在使用Ionic 4应用程序，当用户在移动后退按钮上单击2次时，它应关闭该应用程序，但这没有发生。

这是我的app.component.ts：

lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;

constructor(){
this.backButtonEvent();
}

backButtonEvent() {
    document.addEventListener("backbutton", () => { 
      this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
        if (outlet && outlet.canGoBack()) {
            outlet.pop();
        } else if (this.router.url === '/tabs/tab1') {
          if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
            navigator['app'].exitApp(); //Exit from app
            } else {
            this.presentAlertConfirm();
            this.lastTimeBackPress = new Date().getTime();
          }
          // navigator['app'].exitApp(); // work for ionic 4
        }
      });
    });
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({ …