angular - Angular 中的 Tableau 集成不起作用

Question

我正在尝试将 Tableau 添加到我的 Angular 应用程序中。我按照这些步骤操作，但由于某种原因，我在我的 div 中看不到表格。

我的代码是

declare var tableau: any;


@Component({
  selector: 'app-tableau',
  templateUrl: './tableau.component.html',
  styleUrls: ['./tableau.component.scss']
})
export class TableauComponent implements OnInit {
  viz: any;
  constructor() { }
  ngOnInit() {
  }

  initTableau() {
    const containerDiv = document.getElementById("vizContainer");
    const vizUrl =
        "https://public.tableau.com/views/VacationHome/VacationHome?:embed=y&:display_count=yes";

        const options = {  
          hideTabs: true,  
          onFirstInteractive: () => {  
              console.log("onFirstInteractive");  
          },   
          // onFirstVizSizeKnown: () => {  
          //     console.log("onFirstVizSizeKnown");   
          // }  
      };  

    this.viz = new tableau.Viz(containerDiv, vizUrl, options);

}
HTML : <div id="vizContainer" style="width:800px; height:800px; display: flex; justify-content: right; border: 2px solid black;"></div>

我在终端/控制台中没有看到任何错误。我可以看到空的 div。我可能错过了什么？

Answer 1

如 R. Richards 所述，您还没有真正在组件中的任何地方调用 initTableau。这将是初始化 Tableau 所必需的。

另外，不要使用 document.getElementById，而是使用 @ViewChild

然后您应该在 ngAfterViewInit 中调用 initTableau 方法。

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";

declare var tableau: any;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  viz: any;
  @ViewChild("vizContainer") containerDiv: ElementRef;

  ngAfterViewInit() {
    this.initTableau();
  }

  initTableau() {
    // const containerDiv = document.getElementById("vizContainer");
    const vizUrl =
      "https://public.tableau.com/views/VacationHome/VacationHome?:embed=y&:display_count=yes";

    const options = {
      hideTabs: true,
      onFirstInteractive: () => {
        console.log("onFirstInteractive");
      },
      onFirstVizSizeKnown: () => {
        console.log("onFirstVizSizeKnown");
      }
    };
    this.viz = new tableau.Viz(
      this.containerDiv.nativeElement,
      vizUrl,
      options
    );
  }
}

在您的模板中:

<div
  #vizContainer
  style="display: flex; justify-content: center"
></div>

注意:确保您在 index.html 中包含画面脚本

<script
  type="text/javascript"
  src="https://public.tableau.com/javascripts/api/tableau-2.min.js"
></script>

---

Here's a Working Sample CodeSandbox for your ref.