angular5 – ngx-webcam用于特定视图和分量角6
发布时间:2020-12-17 17:37:22 所属栏目:安全 来源:网络整理
导读:我在我的应用程序中使用ngx-webcam来使用网络摄像头捕获图像.我在app.module.ts中有导入库,也在我的视图中,但它给了我这个错误 ‘webcam’不是一个已知的元素.如果在app.component html中使用网络摄像头标签,它工作正常,但我想在单独的视图中使用它.这是我的
我在我的应用程序中使用ngx-webcam来使用网络摄像头捕获图像.我在app.module.ts中有导入库,也在我的视图中,但它给了我这个错误
‘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(); } 这是我的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> 请参阅附图以供参考. 解决方法
由于你有一个名为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 { } 这将为你做到这一点. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |