angular2-qrcode 引用报错 error NG8001: 'qr-code' is not a known element:

error NG8001: 'qr-code' is not a known element:

解决方案

假如你的组件模块叫做a-demo.module,你的组件叫做print.component.ts

检查使用方法,在当前组件的模块里引入

src\app\routes\a-demo\a-demo.module.ts

import { NgModule } from '@angular/core';
import { QRCodeModule } from 'angular2-qrcode';

...

@NgModule({
    imports: [
        QRCodeModule,
        ...
    ]
})

使用方法

src\app\routes\a-demo\print\print.component.ts

<div>
    <qr-code [value]="'All QR Code data goes here!'" [size]="150"></qr-code>
</div>

如果还报错,检查你的组件是否在当前模块的路由以及模块都进行注册了

src\app\routes\a-demo\a-demo-routing.module.ts

import { NgModule, Type } from '@angular/core';
import { QRCodeModule } from 'angular2-qrcode';

import { ADemoRoutingModule } from './a-demo-routing.module';
import { PrintComponent } from './print/print.component';  // 重点观察这一个代码,你有没有写

const COMPONENTS: Array<Type<void>> = [PrintComponent]; // 重点观察这一个代码,你有没有写

@NgModule({
  imports: [QRCodeModule, ADemoRoutingModule],
  declarations: COMPONENTS
})
export class ADemoModule { }

OK了

posted @   糖~豆豆  阅读(375)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
历史上的今天:
2020-08-14 echart大坑总结~~echarts呈现的数据刷新不完全/echarts画图时tooltip不会更新
2020-08-14 Angular8中共享模块,共享组件的写法(anular其他模块组件引用方法)
Live2D
欢迎阅读『angular2-qrcode 引用报错 error NG8001: 'qr-code' is not a known element:』
点击右上角即可分享
微信分享提示