问题标签 [ionic5]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1881 浏览

angular - Ionic 5、Angular 9 从 URL 中删除查询参数

我有 PWA 和带有 Ionic 5 的移动应用程序。我单击电子邮件中的 URL,该 URL 使用通用链接重定向我。

我的目标是在页面加载时使用参数创建一个新对象,然后删除参数并导航到下一页。我使用一个看起来像这样的位置。

这一切都很好,参数已从 URL 中删除,但问题是当我使用ion-back-button它导航返回时,会将我发送回主页,但参数会再次加载。我猜 queryParams 没有完全清除this.location.replaceState("/")

我在导航到下一页之前尝试this.navCtrl.setRoot("")过,但这没有用。

你能建议吗?谢谢。

0 投票
2 回答
98 浏览

css - 图像的 Ionic/Angular CSS 问题

我在 css 文件中设置背景图像,过去 13 年来我一直在这样做,但由于某种原因,离子/角度搞砸了。在我的css文件中,我有这个:

但它不会渲染图像,当我检查元素时它写道:

背景图片:网址(地址.png)

0 投票
2 回答
27 浏览

authentication - 如何在登录时将登录替换为帐户。[离子 5] -> 离子标签

我试图在用户登录后将 LoginPage 替换为 AccountPage,将选项卡保留在底部,但是在使用 this.router.navigate(account) 之后,它会完全删除选项卡。

预期行为:用户单击帐户选项卡,用户登录,登录页面替换为用户帐户页面。以下是预期行为的一些屏幕截图

登录前

登录后

  • 登录页面.ts
  • tabs.page.ts
  • 选项卡路由.module.ts
0 投票
1 回答
125 浏览

firebase - 如何在 Ionic 中将 firebase 实时数据库数组显示到列表中

我想将enquiryContacted数组显示到离子列表中。ts代码如下

html代码在这里

我无法在 HTML 上看到任何结果。

看这张图片:

在此处输入图像描述

0 投票
1 回答
739 浏览

css - 可点击离子卡内的离子图标不适用于浮动:对

我有一个ion-card可点击的 s 列表,其中包含一组图标,当您将鼠标悬停在它上面时会出现这些图标。我的问题是图标的浮动性质意味着它们实际上并不在它们看起来的位置(如下图所示),因此ion-card点击会将其覆盖。我已经知道我需要$event.stopPropagation()在那里,但这并不能解决它。

那么我的问题是:我如何能够单击ion-icons但不破坏过程中任何其他元素的位置?

提前致谢

浮动图标按钮不会显示在 Chrome Element 检查中

HTML

CSS

0 投票
1 回答
2120 浏览

css - Ionic 5 在 iOS 上设置可折叠标题颜色

我的应用程序 UI 很复杂,所以我举一个例子来说明我的问题。在 Ionic 5 上,我的代码直接取自官方文档

如果我以某种方式设置工具栏的颜色,<ion-toolbar color="primary">我会得到这样的东西

在此处输入图像描述

如何为彩色工具栏上方的空间设置颜色?

0 投票
0 回答
1530 浏览

javascript - Ionic 5:VirtualScroll 和图像缓存

我正在构建一个应用程序(Ionic 5 + Angular 9 + Capacitor),其中包含一长串包含图像和简短描述的卡片。因此,在这种情况下,我必须使用虚拟滚动,因为具有长列表的页面加载速度太慢。问题是每次向下和向上滚动时都会再次加载相同的图像(来自外部 url),所以如果您使用移动连接(3G 等)真的很糟糕,而且如果您离线我想使用这些图像/松开连接。

我已经以某种方式解决了它,但是,如果您向下滚动太快并向上滚动,则正确的图像会被错误的图像替换。这是因为我认为是虚拟滚动。

那么,如果我使用虚拟滚动,您是否知道可以用于图像缓存和离线使用的任何好的解决方案?

首先,我想使用 ServiceWorker,但如果您在设备上构建应用程序,它就不起作用。在此处查看有关此问题的更多信息:https ://github.com/ionic-team/ionic/issues/20890

我还发现了这个插件https://github.com/zyra/ionic-image-loader但它不适用于 Ionic 5 和 Capacitor。

所以,我现在的解决方案是这样的:

home.page.html:

事件列表card.component.ts:

事件列表卡组件.html:

我在这里使用 onChanges 是因为如果您将 onInit 与虚拟滚动一起使用,即使您有 100 个项目,它也只会执行大约 10 次——虚拟滚动正在替换卡片而不是创建新卡片。

0 投票
3 回答
1028 浏览

angular - Angular 中未检测到子路由

我正在开发一个离子应用程序(Ionic 5),似乎我无法让路由正常运行。这是我的应用程序路线。

在此处输入图像描述

但似乎我无法让这个网址工作 /state/test-centers

Angular没有找到那条路线..这是跟踪

我只是在尝试这个..我也试过这个..也没有用..

0 投票
1 回答
1851 浏览

angular - 离子日期时间中的禁用日期(Ionic 4,Ionic 5)

我已经实现的场景ion-datetime要求可以禁用某些日期。封锁日期。这在一般应用程序中相当普遍,例如Airbnb

据我所知,Ionic 附带的ion-datetime模块不支持禁用日期,而且我找不到支持日期和时间选择的外部库,该库可以实现到 Ionic 和工作的现代迭代中。

有没有人以优雅的方式解决了这个问题,或者有任何解决方案使 [Ionic] 原生日期选择器从选择轮禁用某些选择器选择天?

0 投票
0 回答
54 浏览

angular - 离子 - 角度构建错误 - 无法分配给引用或变量

我正在构建一个 Ionic-Angular 应用程序。该应用程序在浏览器上运行良好(使用离子服务),但是当我尝试构建它时它失败了。我收到一个参考错误。我怎样才能找出错误的确切位置?

在此处输入图像描述