确保已安装 ngx-barcode: npm install ngx-barcode --save
导入 CommonModule 和 NgxBarcodeModule: import { CommonModule } from '@angular/common'; import { NgxBarcodeModule } from 'ngx-barcode';
在 imports 数组中引入 CommonModule 和 NgxBarcodeModule:
@NgModule({ imports: [ CommonModule, NgxBarcodeModule ], ... })
在组件中使用 ngx-barcode,并将值绑定到 input 属性:
定义要传递给 input 属性的动态值:
value: string = '1234567890';
如果值需要从其他组件或服务中获取,使用 Angular 的依赖注入来注入服务并获取值:
import { Component, OnInit } from '@angular/core'; import { DataService } from '../services/data.service';
@Component({ selector: 'app-barcode', templateUrl: './barcode.component.html', styleUrls: ['./barcode.component.css'] }) export class BarcodeComponent implements OnInit { value: string;
constructor(private dataService: DataService) { }
ngOnInit() { this.value = this.dataService.getData(); } }
在上面的示例中,DataService 是一个服务,它返回要传递给 ngx-barcode 的动态值。
通过以上步骤,您应该能够正确地使用 ngx-barcode 来生成动态条形码。