javascript - DWT Javascript库进度对话框随Angular 5自动显示

我将Dynamic Web Twain javascript库合并到我的angular应用程序中，以允许最终用户使用Web浏览器而不是桌面应用程序进行扫描。

加载页面后，进度条将立即弹出。这不是预期的行为，当我使用 Angular 4时也不会发生。我在工作中使用 Angular 5。使用哪种浏览器(IE，Chrome，Firefox)也没有区别。

我的Angular版本是:

> Angular CLI: 1.6.6 Node: 9.4.0 OS: win32 x64 Angular: 5.2.3 ...
> animations, common, compiler, compiler-cli, core, forms ... http,
> language-service, platform-browser ... platform-browser-dynamic,
> router
>
> @angular/cli: 1.6.6 @angular-devkit/build-optimizer: 0.0.42
> @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52
> @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.6
> @schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0

我已使用以下命令将javascript库包含到我新创建的Angular项目中:

npm install dwt --save
npm install @type/dwt --save

还要注意，我的webtwain.min.js已添加到我的angular-cli.json中的脚本中:

"scripts": [
    "../node_modules/dwt/dist/dynamsoft.webtwain.min.js"

这是我的项目的布局:

javascript - DWT Javascript库进度对话框随Angular 5自动显示-LMLPHP

最后，这是我的component.ts文件及其相关的html(无论如何填充html，结果都是一样的):

    /// <reference types="dwt" />

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-scan',
  template: '<button (click)="acquireImage()">Scan Document</button><div id="dwtcontrolContainer"></div>',
  styleUrls: ['./scan.component.css']
})
export class ScanComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }


  acquireImage(): void {
    const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    dwObject.IfShowIndicator = false;
    const bSelected = dwObject.SelectSource();
    if (bSelected) {
      const onAcquireImageSuccess = () => { dwObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      dwObject.OpenSource();
      dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }

}

最后是结果:

显示的值为0％的“进度条”会立即弹出。在 Angular 4中，不会发生这种情况。关于什么原因的任何想法？我正在尝试阅读4到5之间的更改，特别是异步和同步加载，但是对于该框架我还是很陌生。

谢谢，
乔希

最佳答案

这是Dynamsoft的Tom。

您在此处发布的内容是SDK Dynamic Web TWAIN的v13.3中的一个已知问题。

这是解决方法

更新CSS(dynamsoft_dwt_html5.css)以添加以下内容
dialog[closed] { display: none;}

更新dynamsoft.webtwain.initiate.js以应用新的CSS规则
m.showDialog=function(y){var z=this,v;if(z.open){j.error("showDialog called on open dialog.");return}z.open=i; z.removeAttribute("closed");

m.closeDialog=function(t){var v=this;if(!v.open){j.error("closeDialog called on closed dialog.")}v.open=o;v.removeAttribute("open");

v.setAttribute("closed","closed");
y.push('<dialog class="dynamsoft-dwt-dialogProgress" closed="closed" style="top:30%">

由于代码已被最小化，因此在您自己的JS副本中看起来可能有所不同，您可以向我们的支持团队发送电子邮件(如果可能，请使用[email protected]，请使用您的企业电子邮件地址)作为补丁。谢谢。

顺便说一句，该修补程序将是 v13.4 的一部分，即将发布。

关于javascript - DWT Javascript库进度对话框随Angular 5自动显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48669929/