我在我的应用程序中使用ngx-webcam来使用网络摄像头捕获图像.我在app.module.ts中有导入库,也在我的视图中,但它给了我这个错误
‘webcam’不是一个已知的元素.如果在app.component html中使用网络摄像头标签,它工作正常,但我想在单独的视图中使用它.这是我的代码
‘webcam’不是一个已知的元素.如果在app.component html中使用网络摄像头标签,它工作正常,但我想在单独的视图中使用它.这是我的代码
import {WebcamImage} from 'ngx-webcam';
export class CreateMemberComponent implements OnInit {
private trigger: Subject<void> = new Subject<void>();
// latest snapshot
public webcamImage: WebcamImage = null;
public triggerSnapshot(): void {
this.seconds = 3;
this.trigger.next();
this.seconds = null;
}
public handleImage(webcamImage: WebcamImage): void {
console.log('received webcam image',webcamImage);
this.webcamImage = webcamImage;
}
public get triggerObservable(): Observable<void> {
return this.trigger.asObservable();
}@H_301_13@
这是我的HTML代码
<div class="col-sm-4">
<div style="text-align:center">
<div>
<p>{{seconds}}</p>
<webcam [trigger]="triggerObservable" (imageCapture)="handleImage($event)"></webcam>
<br/>
<button id="snapshotBtn" (click)="triggerSnapshot();">Take A Snapshot</button>
</div>
</div>
<div class="snapshot" *ngIf="webcamImage">
<h2>Nice one!</h2>
<img [src]="webcamImage.imageAsDataUrl"/>
</div>
</div>@H_301_13@
请参阅附图以供参考.
解决方法
由于你有一个名为member-profile的模块,你应该像app.module一样导入它的member-profile模块.如果从app.module中删除它,它仍然可以在与member-profile模块关联的组件中工作.
import {WebcamModule} from 'ngx-webcam';
@NgModule({
imports: [
WebcamModule
],declarations: [CreateMemberComponent,UpdateMemberComponent,MembersListComponent]
})
export class MembersProfileModule { }@H_301_13@
这将为你做到这一点.
