标签: ionic4

Ionic 4 Camera/ActionSheet对象(...)不是一个功能

我正在尝试在Ionic 4中使用Camera Plugin,当服务启动时没有错误,在浏览器控制台中出现此错误:

我删除文件夹node_modules并重新安装它,但无法解决此问题.

npm安装

使用ActionSheet我有同样的错误.

包中的依赖关系:

"dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "^6.1.2",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "^6.1.2",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/router": "~6.1.1",
    "@ionic-native/action-sheet": "^4.11.0",
    "@ionic-native/camera": "^4.11.0",
    "@ionic-native/core": "^5.0.0-beta.14",
    "@ionic-native/file-transfer": "^4.11.0",
    "@ionic-native/network": "^4.11.0",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "^4.0.0-beta.2",
    "@ionic/lab": "^1.0.6",
    "@ionic/ng-toolkit": "^1.0.6",
    "@ionic/schematics-angular": "^1.0.0",
    "cordova-android": "^7.1.1",
    "cordova-android-support-gradle-release": "^1.4.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.3",
    "promise-polyfill": "^8.0.0",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "zone.js": …

Run Code Online (Sandbox Code Playgroud)

object ionic-framework cordova-plugins ionic4

Jon*_*ecl

2018 08-13

1
推荐指数

1
解决办法

2763
查看次数

如何将YouTube视频嵌入Ionic 4应用程序

我正在尝试开发一个离子型应用程序，该应用程序将作为pwa部署，我希望将其中嵌入YouTube视频并将其显示在网格中。我的Cloud Firestore对象提供了视频链接，其标题和简短描述。

现在的问题是，当我尝试在具有单个网址的离子应用程序中使用iframe时：

<iframe width="560" height="315" src="https://www.youtube.com/embed/6kqe2ICmTxc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Run Code Online (Sandbox Code Playgroud)

那么它就可以了，但是当我将它绑定到数据库的Video URL时，它就不起作用了。控制台显示URL不是安全的URL。

现在，我知道可以使用DomSanitizer对其进行修复，但是我不知道如何将其用于包含所需链接的对象数组。

typescript ionic-framework ionic4 angular-dom-sanitizer

pul*_*wal

lucky-day

1
推荐指数

1
解决办法

6684
查看次数

Ionic4组件-菜单：必须具有“ content”元素才能侦听其上的拖动事件

我有以下代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic 4 - Menu</title>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<script>
window.addEventListener('load', event => {
    document.querySelector('.button_details').addEventListener('click', (event) => {
        document.querySelector('.menu_main').toggle();
    });
});
</script>
</head>
<body>

    <ion-menu class="menu_main" side="start">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

它工作正常，但有一个例外：页面加载时，控制台上出现以下错误：

Error: "Menu: must …

Run Code Online (Sandbox Code Playgroud)

javascript typescript ionic-framework stenciljs ionic4

dav*_*esp

lucky-day

1
推荐指数

4
解决办法

6277
查看次数

单张地图和IONIC 4

我需要在IONIC 4上创建地图。
但这是不可能的，因为我没有IONIC 4的地图。

因此，是否有可能在IONIC 4上为Android上的应用创建传单地图？

dictionary leaflet ionic4

Lui*_*ira

2018 12-27

1
推荐指数

1
解决办法

6340
查看次数

删除 ionic 4 中输入的边缘

我目前正在 ionic v4 上开发一个应用程序，我的问题是我无法移除焦点的边缘，以前在 ionic v3 中只有这些代码行放在 variable.css 中并准备就绪，但在这个版本中它不起作用，谢谢

  $text-input-md-highlight-color-invalid: transparent;
  $text-input-md-highlight-color-valid: transparent;
  $text-input-md-show-invalid-highlight: transparent;
  $text-input-md-highlight-color: transparent;
  $text-input-md-show-valid-highlight: transparent;
  $text-input-md-show-focus-highlight: transparent;
  $text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight transparent;
  $text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight transparent;

Run Code Online (Sandbox Code Playgroud)

ionic4

Iva*_*res

lucky-day

1
推荐指数

1
解决办法

1586
查看次数

Ionic 4 - 屏幕方向（横向）不起作用

我是 Ionic 4 的新手，我正在尝试将屏幕方向设置为横向并参考文档，这就是我正在做的：

...
import {ScreenOrientation} from '@ionic-native/screen-orientation';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private screenOrientation: ScreenOrientation,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.screenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE);
    ...
  }
}

Run Code Online (Sandbox Code Playgroud)

在编译期间，我收到此错误：

[ng] src/app/app.component.ts(24,33) 中的错误：错误 TS2345：“字符串”类型的参数不可分配给“OrientationLockType”类型的参数。

并在浏览器控制台上：

未捕获的错误：无法解析 AppComponent 的所有参数：([object Object], [object Object], [object Object], ?)。在语法错误 (compiler.js:2426) [] ...

screen-orientation cordova ionic4

Sab*_*iri

2019 01-28

1
推荐指数

2
解决办法

5816
查看次数

离子幻灯片方法不适用于离子 4

无法使用官方文档中 ion-slides 提供的方法。在此处检查了其他答案，但似乎所有人都将 ionic 4 与 ionic 3 混淆，并提供了适用于 ionic 3 的答案。

我想获得幻灯片的活动索引。关于如何实施它的在线文档并不完整。

ionic4

Tar*_*ati

lucky-day

1
推荐指数

1
解决办法

7906
查看次数

未找到自定义管道 ionic 4 | 未找到管道

嘿伙计们，我是新的 ionic 程序员，我目前正在开发一个使用 youtube api（显示来自单个频道的视频）的应用程序。我遵循了一个教程，我和他做了同样的事情，但是我的出现了这个错误。

The pipe 'youtube' could not be found

Run Code Online (Sandbox Code Playgroud)

即使我按照教程所示创建并导入了 youtube 管道。这些是我的代码

这是我的 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import {HttpModule} from '@angular/http';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {YoutubePipe} from './youtube.pipe';



@NgModule({
declarations:
  [AppComponent, YoutubePipe],
entryComponents: [], …

Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework angular ionic4

Bel*_*ier

2019 02-23

1
推荐指数

1
解决办法

1975
查看次数

测试httpclient调用时无法读取未定义的属性“ pipe”

我试图在ionic4应用程序中对我的一些代码进行单元测试，调用一个端点并将响应映射到一个对象，该对象还添加了一个抽头，以便可以从dataservice中将this.faults作为可观察值返回。

fetchFaults(): Observable<Fault[]>
{
return this.http.get<{data: Fault[]}>('https://server/api/faults')
  .pipe(tap((data) => this.faults = data.data) // cache
      , map((data) => data.data)); // return just Fault[] from data.data to the subscriber
}

Run Code Online (Sandbox Code Playgroud)

我正在尝试测试的

  describe('fetchFaults', () => {
    it('makes expected calls', () => {
      const httpClientStub: HttpClient = TestBed.get(HttpClient);
      spyOn(httpClientStub, 'get');
      service.fetchFaults();
      expect(httpClientStub.get).toHaveBeenCalled();
    });
  });

Run Code Online (Sandbox Code Playgroud)

但我收到错误消息无法读取未定义的属性“管道”，我是否需要从httpstub返回任何内容？

unit-testing karma-jasmine ionic-framework angular ionic4

JaC*_*hNo

lucky-day

1
推荐指数

1
解决办法

2842
查看次数

ionic 4防止/禁用设备硬件后退按钮

我对ionic 4项目使用了角路由（@ angular / router）以禁用ionic 4中的设备后退按钮prevent-default不起作用，下面是我的代码

app.component.ts

    this.platform.backButton.subscribe(() => {
        if (this.router.url === '/Login') {
          this.util.presentAppExitAlert();
        } else {
          // event.preventDefault();
          console.log("invoing url ", this.router.url);
        }
      });
    });

Run Code Online (Sandbox Code Playgroud)

我无法在此处禁用设备后退按钮的任何帮助

ionic3 angular angular-router ionic4

Moh*_*opi

2019 03-21

1
推荐指数

3
解决办法

3887
查看次数