标签: ionic-framework
子目录中的 Ionic Angular pwa
我有一个Ionic (5) Angular应用程序，其 PWA packges 设置为ng add @angular/pwa --project app（在 angular.json 中它仍然命名为“app”，所以--project app应该是正确的）。
当我使用服务提供生产构建时，一切都在我的本地计算机上运行良好（我被要求安装pwa应用程序，离线模式工作等）。
但我想从子目录在我的服务器上托管 PWA，如https://example.com/www. 所以我调整了index.html<head>以包含<base href="/www/ />并将.htaccess放入我的服务器上的www文件夹中，其中包含
<IfModule mod_rewrite.c>
RewriteEngine On
# -- REDIRECTION to https (optional):
# If you need this, uncomment the next two commands
# RewriteCond %{HTTPS} !on
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
# --
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
</IfModule>
当我在浏览器中（Chrome、Firefox、Androd 上的 …
ionic-framework service-worker progressive-web-apps angular angular-service-worker
推荐指数
解决办法
查看次数
可点击离子卡内的按钮点击事件也执行父事件
我正在创建一个离子应用程序，当我单击卡片时会触发模式，我面临的问题是，当我单击卡片上的按钮时，模式也会打开，我该如何阻止这种情况发生。我对任何解决方法持开放态度，因为我已经被困在这个问题上有一段时间了。下面是一些有用的代码和图片：
//html
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let item of exercises">
<ion-card class="exercise-card" (click)="openModal(item.id)">
<img [src]=item.image class="image-card">
<h3 style="font-weight: bold;">{{item.name}}</h3>
<h5>{{item.sets}} sets of {{item.reps}} reps and {{item.remarks}}</h5>
<h6>{{item.date | date: 'dd/MM/yyyy'}} ({{item.time}})</h6>
<br>
<div style="text-align: center;">
<ion-button size="medium" style="width: 30%;" color="success" (click)="complete(item)">
<ion-icon slot="icon-only" name="checkmark-outline"></ion-icon>
</ion-button>
<ion-button size="medium" type="submit" style="width: 30%;" [routerLink]="['/edit-exercise', item.id]">
<ion-icon slot="icon-only" name="create-outline"></ion-icon>
</ion-button>
<ion-button size="medium" style="width: 30%;" color="danger" (click)="delete(item)">
<ion-icon slot="icon-only" name="trash-bin"></ion-icon>
</ion-button>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
该模式仅应在以下情况下触发： 单击此页面上的卡片：
。
但当我单击蓝色编辑按钮时它也会触发：
。
event-propagation dom-events stoppropagation ionic-framework angular
推荐指数
解决办法
查看次数
电容器文件系统 API - 无法使用 Filesystem.writeFile 在设备上写入文件
我正在使用 Angular 9 / Ionic 5 / Capacitor 2.0 开发混合应用程序。我正在尝试将来自 API 的文件（基本上是 PDF 或图像文件）作为 Blob 保存到我的移动设备（IOS/Android）的文件系统中。我的最终目标是重现文件的类似浏览器的下载功能（允许用户将其保留在手机上）。
这是我的代码：
downloadNativeFile(blob: Blob, fileName: string){
let reader = this.getFileReader();
reader.onloadend = (readerEvent) => {
if(reader.error){
console.log(reader.error);
} else {
let base64data: any = readerEvent.target['result'];
try {
Filesystem.writeFile({
path: fileName,
data: base64data,
directory: FilesystemDirectory.Data
}).then((res)=>{
Filesystem.getUri({
directory: FilesystemDirectory.Data,
path: fileName
}).then((getUriResult) => {
const path = getUriResult.uri;
console.log("The file's path : " + path);
console.log(Capacitor.convertFileSrc(getUriResult.uri));
}, (error) => {
console.log(error);
});
}).catch((err)=>{
console.log("Error", err);
}); …推荐指数
解决办法
查看次数
getElementById 在 ngFor 循环元素中返回“null”
所以我目前正在使用 Ionic-Angular 开发一个应用程序。
我正在使用 Angular *ngFor 创建许多要在滑块中显示的对象，如下所示：
<ion-slides #theSlides [options]="sliderConfig" id="peerSlide" >
<ion-slide *ngFor="let peer of peers; let i = index">
<img id="{{'x' + i}}">
<p>{{peer.firstname}}</p>
<p>{{peer.lastname}}</p>
<p>{{peer.status}}</p>
</ion-slide>
</ion-slides>
ngFor 循环工作正常，但是当我尝试通过 getElementById 访问内部图像元素以设置图像源时，它返回 null。这是将对等对象推入对等数组的类型脚本代码：
this.peer_profile_ready.subscribe(
() => {
var peer = {
id: 1,
firstname: this.peerFirstName,
lastname: this.peerLastName,
status: this.peerStatus,
}
this.peers.push(peer);
var peerImage = < HTMLImageElement > document.getElementById("x0");
console.log('peerImage', peerImage)})
所以现在控制台返回 null。如果您能告诉我这里出了什么问题以及访问 ngFor 循环内的元素的最佳方法是什么，我将不胜感激。谢谢
推荐指数
解决办法
查看次数
我的 Ionic 应用程序无法从 Android 模拟器访问我的本地 Node 服务器
我正在尝试使用 Capacitor 在 Android 模拟器上第一次运行我的 React/Ionic 应用程序。该应用程序应使用 Axios 连接到我的本地节点服务器。
虽然我的应用程序在模拟器上成功启动，但所有服务器请求都失败了Msg: Error: Network Error
这是我所做的步骤：
我将 Axios 配置为连接到
http://10.0.2.2:3001，localhost但请求仍然失败http://10.0.2.2:3001/api我在 Android Emulator Chrome 浏览器中打开该 url ，它成功连接到我的服务器并返回响应我尝试将以下conf添加到我的capacitor.config.json文件中，但我的应用程序仍然失败
Run Code Online (Sandbox Code Playgroud)"server": { "allowNavigation": ["10.0.2.2"] }
我应该尝试让我的应用程序连接到我的本地服务器，您还有其他建议吗？谢谢
推荐指数
解决办法
查看次数
CordovaError：找不到“JAVA_HOME”环境变量。尝试手动设置
我从一个人那里得到了一个 ionic 项目，我想在真正的 Android 设备中调试它。
我使用这个命令：
ionic cordova run android --device --verbose
最后我收到这些错误消息：
在 Android 上准备 Firebase
未找到挂钩“before_compile”的脚本。
找不到“JAVA_HOME”环境变量。尝试手动设置。
CordovaError：找不到“JAVA_HOME”环境变量。尝试手动设置。
我已经JAVA_HOME设置了，事实上，如果我这样做了，echo $JAVA_HOME我会得到：
/usr/lib/jvm/java-1.11.0-openjdk-amd64
根据未能找到“JAVA_HOME”环境变量。尝试手动设置它，我也尝试将bin文件夹添加到JAVA_HOME变量，但没有成功。
如果我也尝试java -version，javac -version我会收到成功消息。
推荐指数
解决办法
查看次数
目标入口点“@ionic-native/media-capture”缺少依赖项：-@ionic-native/core
当我尝试在 Android 上构建我的离子移动应用程序时，出现以下错误。
\nAn error occurred during the build:\nError: The target entry-point "@ionic-native/media-capture" has missing dependencies:\n - @ionic-native/core\n\n at TargetedEntryPointFinder.findEntryPoints (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/targeted_entry_point_finder.js:40:23)\n at /Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/execution/analyze_entry_points.js:28:41\n at SingleProcessExecutorSync.SingleProcessorExecutorBase.doExecute (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:28:29)\n at /Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:57:59\n at SyncLocker.lock (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/locking/sync_locker.js:34:24)\n at SingleProcessExecutorSync.execute (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/execution/single_process_executor.js:57:27)\n at Object.mainNgcc (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/src/main.js:74:25)\n at Object.process (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@angular/compiler-cli/ngcc/index.js:29:23)\n at NgccProcessor.processModule (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@ngtools/webpack/src/ngcc_processor.js:163:16)\n at /Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@ngtools/webpack/src/ivy/host.js:55:18\n at /Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@ngtools/webpack/src/ivy/host.js:47:24\n at Array.map (<anonymous>)\n at Object.host.resolveModuleNames (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/@ngtools/webpack/src/ivy/host.js:45:32)\n at actualResolveModuleNamesWorker (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/typescript/lib/typescript.js:102904:133)\n at resolveModuleNamesWorker (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/typescript/lib/typescript.js:103126:26)\n at resolveModuleNamesReusingOldState (/Users/prabhashibuddhima/Documents/Personal/Projects/VRec/myVideo/node_modules/typescript/lib/typescript.js:103200:24)\nAn unhandled exception occurred: The target entry-point "@ionic-native/media-capture" has missing dependencies:\n - @ionic-native/core\n\nSee "/private/var/folders/vp/8s5chkws6tx5v3wjyvr7n_qm0000gn/T/ng-HBL1kz/angular-errors.log" for further details.\n推荐指数
解决办法
查看次数
ionChange 事件不适用于 ion-select
我想在每次更改值时执行一个代码块ion-select。
该文档ionChange为此提供了一个事件。
当我尝试执行它时，什么也没有发生。
我尝试过ionFocus并且有效，但我需要该ionChange活动才能正常工作。
<ion-select @ionChange="changeUnit('ionChange')" @ionFocus="changeUnit('ionFocus')" interface="popover" placeholder="required">
<ion-select-option value="m3">m3</ion-select-option>
<ion-select-option value="m2">m2</ion-select-option>
<ion-select-option value="ml">ml</ion-select-option>
<ion-select-option value="kg">kg</ion-select-option>
</ion-select>
changeUnit(value){
console.log(value);
}
我错过了什么吗？为什么有效ionFocus但ionChange无效？
我正在使用 ionic 5 和 vue 3。
mitt我还使用同一组件中的发射器。但这也不影响ionFocus活动的进行。
推荐指数
解决办法
查看次数
错误警告：应避免使用 flatDirs，因为它不支持任何元数据格式
我的 Ionic/Angular 项目在 Android 上运行时遇到问题。尝试使用全新安装的 Node、Angular、Ionic、Android studio、Ionic 的新项目（选项卡）来排除故障。
\n仍然无法运行，我\xe2\x80\x99已经卡了两天了。我现在收到以下错误。
\nnpx cap run android --stacktrace --info\n\xe2\x88\x9a Copying web assets from www to android\\app\\src\\main\\assets\\public in 3.40s\n\xe2\x88\x9a Creating capacitor.config.json in android\\app\\src\\main\\assets in 3.15ms\n\xe2\x88\x9a copy android in 3.48s\n\xe2\x88\x9a Updating Android plugins in 10.59ms\n[info] Found 4 Capacitor plugins for android:\n @capacitor/app@1.0.3\n @capacitor/haptics@1.0.3\n @capacitor/keyboard@1.0.3\n @capacitor/status-bar@1.0.3\n\xe2\x88\x9a update android in 148.19ms\n\xc3\x97 Running Gradle build - failed!\n[error] WARNING:: Using flatDirs should be avoided because it doesn't support any meta-data formats.\n Currently detected usages:\n - repository flatDir used …推荐指数
解决办法
查看次数
在 Android 和 ios 设备上运行离子/电容器应用程序并实时重新加载的命令是什么
我有离子电容器项目，我正在尝试在设备上运行它。由于我使用的是 Windows 机器，因此需要 Android livereload 调试帮助
推荐指数
解决办法
查看次数
标签 统计
ionic-framework ×10
capacitor ×4
angular ×3
cordova ×2
android ×1
debian ×1
dom-events ×1
gradle ×1
html ×1
ionic-native ×1
java ×1
javascript ×1
vue.js ×1