How to use the bpmn-js/lib/NavigatedViewer function in bpmn-js

mounted() {
    this.taskList = this.taskData
    let bpmnViewer = new BpmnViewer({ container: this.$refs["canvas"] });
    let _self = this;
    bpmnViewer.importXML(this.xmlData, function(err) {
      if (err) {
        console.log('加载失败', err);
      } else {
        let canvas = bpmnViewer.get('canvas');
        canvas.zoom('fit-viewport')
        if (_self.taskList && _self.taskList.length > 0) {
          // let overlays = bpmnViewer.get('overlays');
          // let overlayHtml = document.createElement('div');
          // overlays.add('StartEvent_1', {
          //   position: {
          //     top: 0,
          //     right: 0,
          //   },
          //   html: overlayHtml

import $ from 'jquery';


// require the viewer, make sure you added it to your project
// dependencies via npm install --save-dev bpmn-js
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';

import EmbeddedComments from 'bpmn-js-embedded-comments';

var viewer = new BpmnViewer({
  container: '#canvas',
  additionalModules: [
    EmbeddedComments
  ]
});


function openDiagram(diagram) {

  viewer.importXML(diagram, function(err) {
    if (err) {

      alert('could not import BPMN 2.0 XML, see console');
      return console.log('could not import BPMN 2.0 XML', err);
    }

// we use stringify to inline an example XML document.
import qrDiagram from '../resources/qr-code.bpmn';

import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';


var bpmnViewer = new BpmnViewer({
  container: '#canvas',
  /* uncomment to configure defaults for all overlays
  overlays: {
    defaults: {
      show: { minZoom: 1 },
      scale: true
    }
  }
  */
});


// import qr diagram

bpmnViewer.importXML(qrDiagram, function(err) {

async ngOnInit() {
    this.bpmnViewer = new Viewer({
      container: '.canvas'
    });
    this.route.params.subscribe(
      async params => {
        this.processInstanceID = params.id as string;
        console.log("Will GET BpmnInfraRequest instance using id: " + this.processInstanceID);
        await this.getProcInstance(this.processInstanceID);

        this.getVarInst(this.processInstanceID);
      });
  }

constructor(private http: HttpClient) {

    this.bpmnJS = new BpmnJS();

    this.bpmnJS.on('import.done', ({ error }) => {
      if (!error) {
        this.bpmnJS.get('canvas').zoom('fit-viewport');
      }
    });
  }