Question

我必须做一个小游戏，用户可以用角度绘制HTML画布。

<canvas id="canvas" (click)="drawing(this)"></canvas>

这是我的画布标签。

import {
Component, Input, ElementRef, AfterViewInit, ViewChild, OnInit
} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/pairwise';

@Component({
  selector: 'app-draw',
  template: '<canvas id="canvas" (click)="drawing(this)"></canvas>',
  templateUrl: './draw.component.html',
  styleUrls: ['./draw.component.css']
})

export class DrawComponent implements OnInit {
  // a reference to the canvas element from our template
  @ViewChild('canvas') public canvas: ElementRef;

  // setting a width and height for the canvas
  @Input() public width = 400;
  @Input() public height = 400;

  private cx: CanvasRenderingContext2D;  


  constructor() {
    console.log(this.canvas);
   }

  ngOnInit() {
  }

  public ngAfterViewInit() {
    // get the context
    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
    this.cx = canvasEl.getContext('2d');

    // set the width and height
    canvasEl.width = this.width;
    canvasEl.height = this.height;

这是在我的HTML组件中。我在互联网上发现了ViewChild的事情，但我不明白它是如何工作的。有没有其他方法可以在没有DOM和jquery的情况下以HTML格式获取HTML标记？

我如何在Angular4中获得HTML标签？ WievChild不提供undefined

0 个答案: