Google Assistant Interactive Canvas с использованием Angular - PullRequest
Новая
       65

Google Assistant Interactive Canvas с использованием Angular

0 голосов
/ 21 апреля 2020

Я прочитал в документации AoG о создании интерактивного холста в Angular. Я попытался создать действие холста, используя Angular. Я импортировал тег index интерактивного холста в index. html, но я не уверен, как использовать интерактивный холст в файле app.component.ts. Когда я пытаюсь использовать интерактивный холст в файле app.component.ts, я получаю ошибку 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 file 

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

1 Ответ

2 голосов
/ 21 апреля 2020

Если мы посмотрим на документацию, то увидим одну заметку 

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.

Шаги действительно обнаружили интерактивный холст

После добавления тега сценария интерактивного холста просто запустите приложение angular и в консоли браузера просто наберите window.interactiveCanvas , который отображает вывод

Так что на основе вышеупомянутого подхода я сделал несколько настроек в коде, а также установил JQuery, как показано ниже, заставляет приложение angular работать в Interactive 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>

Теперь я получил начальный вывод холста, как показано ниже

enter image description here

...