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了
标签:
angular
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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其他模块组件引用方法)