ionic2 中的导入指令 - ng2-qrcode

Question

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

serve /?restart=454981 (www/index.html) serve /cordova.js (mocked) serve /build/js/es6-shim.min.js serve /build/js/Reflect.js serve /build/js/zone.js serve /build/js/app.bundle.js serve /build/css/app.md.css serve /build/app.html serve /build/pages/page1/page1.html 0 045123 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 1 045125 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator 2 045159 group
EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on QRCodeComponent 3 045160 error EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on QRCodeComponent 4
045160 error STACKTRACE: 5 045161 error
resolvePromise@http://localhost:8100/build/js/zone.js:538:32 resolvePromise@http://localhost:8100/build/js/zone.js:523:18 scheduleResolveOrReject/<@http://localhost:8100/build/js/zone.js:571:18 Zonehttp://localhost:8100/build/js/zone.js:356:24 NgZoneImpl/this.inner<.onInvokeTask@http://localhost:8100/build/js/app.bundle.js:35178:32 Zonehttp://localhost:8100/build/js/zone.js:355:24 Zonehttp://localhost:8100/build/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 error Unhandled Promise rejection:, No Directive annotation found on QRCodeComponent, ; Zone:, angular, ; Task:, Promise.then, ; Value:, [object Object]

我在 GitHub 上关注 readme 并执行：

npm install ng2-qrcode

创建带有组件注释的 Class：

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 in issue "mport QRCode with typescript import", here's a 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

Import directive in ionic2 - ng2-qrcode

typescript

angular-directive

ionic2

angular