angular5 - ngx-webcam 用于特定 View 和组件角度 6

Question

我在我的应用程序中使用 ngx-webcam 来使用网络摄像头捕获图像。我在 app.module.ts 和我的 View 中有导入库，但它给了我这个错误
“网络摄像头”不是已知元素。如果在 app.component html 中使用网络摄像头标签，效果很好，但我想在单独的 View 中使用它。这是我的代码

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>

请参阅附图以供引用。

Answer 1

由于您有名为 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 { }

这将为您解决问题。