Google 交互助手 Canvas 使用 Angular

Question

我已经阅读了关于在 Angular 中创建交互式 canvas 的 AoG 文档。我尝试使用 Angular 创建一个 canvas 动作。我已经在 index.html 中导入了交互式 canvas 脚本标签，但我不确定如何在 app.component.ts 文件中使用交互式 canvas 。当我尝试在 app.component.ts 文件中使用交互式 canvas 时，出现类似

的 ts 错误

cannot find name interactive canvas

Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Canvas</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script>

  <!-- SCENE CONTROLLER -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

component.ts 文件

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

@Component({
  selector: 'app-canvas',
  templateUrl: './canvas.component.html',
  styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnInit {
  canvas;

  constructor() {
    this.canvas = interactiveCanvas;
  }

  ngOnInit(): void {
  }

}

我需要为它安装任何插件吗？。有没有人尝试用 Angular

创建交互式 canvas

Answer 1

如果我们查看文档，您会看到一条注释

Note: The interactive canvas object is attached to the window object. If you are using a front-end framework to develop your web app, you need to ensure that you have access to a window to set up the API.

Steps确实找到了交互式canvas

添加交互式 canvas 脚本标签后，只需运行 angular 应用程序和浏览器内控制台，只需键入 window.interactiveCanvas 显示输出

因此，基于上述方法，我对代码进行了一些调整，并像下面这样安装了 JQuery，这使得 angular 应用程序可以在交互式 canvas

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-canvas',
  templateUrl: './canvas.component.html',
  styleUrls: ['./canvas.component.css']
})
export class CanvasComponent implements OnInit {
  interactiveCanvas;
  callbacks: any = {};

  constructor() {
    this.interactiveCanvas = (window as any).interactiveCanvas;
    this.callbacks.onUpdate = (data: any) => {
      this.callbacks.html_data = data;
    };
  }

  ngOnInit(): void {
    this.initializeScenes();
  }

  initializeScenes = () => {
    this.interactiveCanvas.getHeaderHeightPx().then((height: any) => {
      $(document.body).css('margin-top', `${height}px`);
      this.interactiveCanvas.ready(this.callbacks);
    });
  }

}

HTML:

<div class="container">
  <div id="welcome">
    <p>Angular canvas</p>
  </div>
</div>

现在我得到了 canvas 的初始输出，如下所示

Google 交互助手 Canvas 使用 Angular

Google Assistant Interactive Canvas using Angular

angular

canvas

actions-on-google

google-assistant-sdk