标签: ionic5

我对 React 和 Ionic 还很陌生。我试图完成的是创建一条“受保护的路线”。我创建一个简单的上下文，名为AuthContext：

import { createContext, Dispatch } from 'react';

/**
 * Context interface for AuthAuthentication/Authorization
 *
 * @property isAuthenticated
 * @property dispatch
 *
 * @interface
 */
interface AuthDefaultContext {
    isAuthenticated: boolean;
    dispatch: Dispatch<any>
}

/**
 * Authentication/Authorization context for managing
 * authenticating/ed and authorizing/ed users
 */
export const AuthContext = createContext<AuthDefaultContext>({
    isAuthenticated: false,
    dispatch: () => {}
});

和FunctionalComponent称为ProtectedRoute：

interface ProtectedRouteProps {
    ProtectedComponent: FunctionComponent,
    routePath: string
}

export const ProtectedRoute: FunctionComponent<ProtectedRouteProps> = ({ …

如何在不单击路由器链接元素的情况下在Ionic 路由器中以给定的动画方向（例如，返回）触发重定向到给定位置？

有一种标准方法可以触发路由器重定向。问题是它不能改变动画方向，所以它总是向前：

// history is a value from react-router, it can be obtained from the HOC of the hook
history.push('/new/address');

还有一个方法可以返回，但是不能设置自定义URL去：

history.goBack();

我也可以制作一个按钮并触发点击它，但它看起来像一个笨拙的解决方案：

const buttonRef = useRef();

const redirect = () => buttonRef.current.click();

return (
  <IonButton
    routerLink="/new/address"
    routerDirection="back"
    ref={buttonRef}
    style={{display: 'none'}}
  />
);

我已将以下代码从 Ionic 3 迁移到 Ionic 5

   const alert = await this.alertCtrl.create({
      subHeader: "About" + " <b>" + this.user.name + "</b>",
      message: "Test Messgae",
      buttons: [
        {
          text: 'Close',
          role: 'cancel',
          handler: () => {
          }
        }
      ]
    });
    await alert.present();

在 Ionic 3 中，用户名以粗体显示，但在 Ionic 5 中，HTML 标签不起作用，< b > 标签显示为文本。请建议我如何在 IONIC 5 中设置警报中的文本样式。

我正在将我的项目从 Ionc3 迁移到 Ionic5。我有一个 ion-textarea ，它会随着用户键入而增加高度，并且它在 Ionic3 中工作。以下是代码。

HTML 页面：

<ion-textarea #hvUserPost type="text" (input)="adjustDesc()"></ion-textarea>

TS页面：

@ViewChild('hvUserPost') hvUserPost: ElementRef;
adjustDesc() {
    let textArea;
    textArea = this.hvUserPost['_elementRef'].nativeElement.getElementsByClassName("text-input")[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    var scrollHeight = textArea.scrollHeight;
    textArea.style.height = scrollHeight + 'px';
}

现在在 Ionic4 中唯一改变的是以下声明

@ViewChild('hvUserPost', {static: false}) hvUserPost: ElementRef;

在 Ionic4 中，我收到以下错误。

ERROR TypeError: Cannot read property 'nativeElement' of undefined

所以this.hvUserPost['_elementRef']是未定义的，this.hvUserPost.nativeElement也是未定义的。

我正在尝试使用离子模式内的离子幻灯片显示图像预览。但缩放功能不起作用。我添加了幻灯片选项。但不工作。随后，缩放功能可与普通页面一起使用。

backdropDismiss : true单击背景时第二个问题不关闭模式

这是代码

页面.html

<ion-slides [options]="slideOpts">
    <ion-slide *ngFor="let p of products">
          <img [src] = 'p.image_url' tappable (click)="openPreview(p.image_url)">

     </ion-slide>
 </ion-slides>

页面.ts

async openPreview(image_url){
    console.log(image_url)

    const modal = await this.modalController.create({
      component: ImageModalPage,
      showBackdrop:true,
      backdropDismiss: true,
      componentProps: {
        image_url : image_url,
      },
    });
    return await modal.present();

  }

模态.html

<ion-item class="close-fake" lines="none" text-center>
    <ion-button (click)="close()" fill="clear" color="light">
      <ion-icon name="close" slot="start"></ion-icon>
      back
    </ion-button>

    <ion-slides [options]="sliderOpts">
        <ion-slide>
          <div class="swiper-zoom-container">
            <img [src] ='image_url'>
          </div>
        </ion-slide>
      </ion-slides>

模态.ts

    sliderOpts = {
        zoom: {
          maxRatio: 5, …

我试图在一页的工具栏中显示后退按钮。下面是我的代码的摘录。

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="" [icon]="arrow-back"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

如果我设置该 defaultHref属性，它会起作用，但我将无法使用带有text和icon 的自定义后退按钮。

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

我该如何让它发挥作用。有人可以帮忙吗？

在我的 Ionic 5 应用程序中，我有以下导航路径。

PageHome -> PageA ->  PageB

我已经为 PageA 实现了 CanDeactivate 防护。

export class LeavePageGuard implements CanDeactivate<isDeactivatable>{
  canDeactivate(
    component: isDeactivatable
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canPageLeave();
  }
}

当用户编辑某些内容并在保存之前按后退按钮时，我会弹出一个弹出窗口来确认用户是否想要离开。

  async canPageLeave() {

    if (this.byPassNav) {
      this.byPassNav = false;
      return true;
    }
    if (JSON.stringify(this.dataOld) != JSON.stringify(this.data)) {

      const alert = await this.alertCtrl.create({
        header: 'Unsaved Chnages',
        message: 'Do you want to leave?',
        buttons: [
          {
            text: 'No',
            role: 'cancel',
            handler: () => { }
          },
          {
            text: …

2021 年 3 月，我安装了 Ionic 6，使用空白模板和“电容器”创建了一个项目。我运行它，一切都很好。现在，我按照离子文档中的指示安装地理位置依赖项，如下所示：

npm install cordova-plugin-geolocation
npm install @ionic-native/geolocation
ionic cap sync

我运行也没有给出任何错误。现在在“home.page.ts”文件中，我导入地理位置依赖项，如下所示：

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
    
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
    
      constructor(){}
    
    }

我运行该项目并收到以下错误：

[ng] An unhandled exception occurred: The target entry-point "@ionic-native/geolocation" has missing dependencies:
[ng]  - @ionic-native/core

在错误的详细日志中，它告诉我以下内容：

[error] Error: The target entry-point "@ionic-native/geolocation" has missing dependencies:
 - @ionic-native/core

    at TargetedEntryPointFinder.findEntryPoints (C:\Users\JAVIERT\Desktop\Proyectos\Ionic\myAppGpsM1\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)
    at C:\Users\JAVIERT\Desktop\Proyectos\Ionic\myAppGpsM1\node_modules\@angular\compiler-cli\ngcc\src\execution\analyze_entry_points.js:29:41
    at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (C:\Users\JAVIERT\Desktop\Proyectos\Ionic\myAppGpsM1\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:28:29)
    at C:\Users\JAVIERT\Desktop\Proyectos\Ionic\myAppGpsM1\node_modules\@angular\compiler-cli\ngcc\src\execution\single_process_executor.js:57:59 …

我正在创建一个新闻应用程序，引用此链接https://www.youtube.com/watch?v=D8J9QUwTWmU&t=3s&ab_channel=CodeXpression \n在服务器上第一次检查时出现错误

\n

未捕获的错误：类型 HttpClient 没有 '\xc9\xb5mod\' 属性

\n

应用程序模块.ts

import { NgModule } from \'@angular/core\';\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { RouteReuseStrategy } from \'@angular/router\';\nimport{HttpClient, HttpClientModule}from \'@angular/common/http\'; \n\n\nimport { IonicModule, IonicRouteStrategy } from \'@ionic/angular\';\n\nimport { AppComponent } from \'./app.component\';\nimport { AppRoutingModule } from \'./app-routing.module\';\n\n@NgModule({\n  declarations: [AppComponent],\n  entryComponents: [],\n  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule,HttpClient],\n  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],\n  bootstrap: [AppComponent],\n  \n})\nexport class AppModule {}\n

应用程序组件.ts

import { Component } from \'@angular/core\';\nimport { …

我按照 ionic 文档安装了 cordova-plugin-fcm-with-dependecy-updated 并进行了所有必要的 firebase 配置。我将 FCM 导入到应用程序模块中。然后我将通知代码放入我的 app.component.ts 中

但是当我执行 ionic cordova run android 时，我有以下信息：

问题是它不显示令牌，请有人可以帮助我。