Question

我尝试在我的测试 ionic2 应用中使用 ng2-qrcode ，但是从未找到该指令，请按照ionic serve输出：

serve /？restart = 454981（www / index.html）发送/cordova.js（模拟）   发送/build/js/es6-shim.min.js服务/build/js/Reflect.js服务   /build/js/zone.js服务/build/js/app.bundle.js服务   /build/css/app.md.css服务/build/app.html服务   /build/pages/page1/page1.html 0 045123 log Angular 2是   在开发模式下运行。调用enableProdMode（）来启用   生产模式。 1 045125警告Native：试着打电话   StatusBar.styleDefault，但Cordova不可用。确保   包括cordova.js或在设备/模拟器中运行2 045159组
  EXCEPTION：错误：未捕获（在承诺中）：未找到指令注释   on QRCodeComponent 3 045160错误EXCEPTION：错误：未捕获   （承诺）：在QRCodeComponent 4上找不到指令注释   045160错误STACKTRACE：5 045161错误
  resolvePromise @ http://localhost:8100/build/js/zone.js:538:32   resolvePromise @ http://localhost:8100/build/js/zone.js:523:18   scheduleResolveOrReject /＆LT; @ http://localhost:8100/build/js/zone.js:571:18   Zonehttp：//本地主机：8100 /建设/ JS / zone.js：356：24   NgZoneImpl / this.inner＆LT; .onInvokeTask @ http://localhost:8100/build/js/app.bundle.js:35178:32   Zonehttp：//本地主机：8100 /建设/ JS / zone.js：355：24   Zonehttp：//本地主机：8100 /建设/ JS / zone.js：256：29   drainMicroTaskQueue @ http://localhost:8100/build/js/zone.js:474:26   ZoneTask / this.invoke @ http://localhost:8100/build/js/zone.js:426:22

6 045161 groupEnd 7 045162错误未处理的承诺   rejection :,在QRCodeComponent上找不到指令注释;区：，   有角度的;任务：，Promise.then ,;值：，[对象对象]

我在GitHub上关注readme并执行：

npm install ng2-qrcode

使用组件注释创建一个类：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {QRCodeComponent} from 'ng2-qrcode'

@Component({
  templateUrl: 'build/pages/page1/page1.html',
  directives: [QRCodeComponent],
})
export class Page1
{
  constructor(private navCtrl: NavController ) { }
}

将标记放在模板 build / pages / page1 / page1.html 中：

<qrcode qrdata="'My QR code data string'" size="256" level="'M'"></qrcode>

但是我收到了这个错误，出了什么问题？难以找到Ionic2解释或文档，我是Ionic2和打字稿的初学者。

Answer 1

我按照问题“ @yahyaKacem ”中的mport QRCode with typescript import进行了解决方案，这里有一个plunker示例。

我不测试上一个版本，但也许新版本可以使用（存在与此问题相关的合并）。

Answer 2

对于那些喜欢原始ng2-qrcode的人，我重构了ng2-qrcode以使其与Ionic3（和Angular4 +）一起使用。 angularx-qrcode基本上是用TypeScript编写的ng2-qrcode的替代品，具有相同的API以及AOT编译和webpack捆绑。

Repo angularx-qrcode 在这里： https://github.com/Cordobo/angularx-qrcode

如果这对你有用，请告诉我。

ionic2中的导入指令 - ng2-qrcode

2 个答案: