小编jre*_*edd的帖子

我已经看到很多关于将D3 v4正确安装到angular2中的不同页面,似乎有很多关于这个主题的不同意见.我正在使用angular2.0和typescript2.我无法正确安装所有内容,以便我的IDE和ts编译器可以正常查看所有部分.如果我从'd3'那里做了像import*那样的d3; 当我做d3.line()时,即使它在浏览器中正常运行并呈现图形线,我也会抱怨.我得到属性'line'在类型'd3'上不存在.当我从d3-selection导入select时,我也遇到了无法在select()上调用转换的问题.

system.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',

      'ng2-tooltip': 'node_modules/ng2-tooltip',
      'js-data': 'npm:js-data/dist/js-data.js',
      'js-data-http': 'npm:js-data-http/dist/js-data-http.js',

      'jquery':'npm:jquery/',
      'd3': 'npm:d3',
      'd3-array': 'npm:d3-array/', …

我正在通过 html 对象标签将 pdf 加载到视图中。出于某种原因，无论何时在 dom 中的其他任何位置发生 angular2 操作（鼠标输入、鼠标移出、单击），都会导致对象/pdf 重新加载。我注意到 internalInstanceId 在对象标签上不断变化，但我无法控制。

<object type="application/pdf" width="100%" height="100%" [data]="cleanUrl(item.url)" id="pdf_content"></object>

这是一个显示正在发生的事情的plunkr。当一个角度事件发生（鼠标悬停在标题之外）时，它会导致对象标签重新加载。

https://plnkr.co/edit/sovRUOn79LTJRDhaellf?p=preview