Блог

Главная - Вопросы по программированию - Ссылка на свойства компонента on Angular (TypeScript) Класс

Ссылка на свойства компонента on Angular (TypeScript) Класс

#angular #typescript #canvas

#angular #typescript #холст

Вопрос:

Я пытаюсь нарисовать круг на холсте в Angular. Я все делаю нормально и вроде понимаю, как все это работает. IDE не выдает ошибок, но когда я запускаю код, консоль выдает сообщение «this.circleApp не определено». Я несколько раз пытаюсь ссылаться на свойства объекта circleApp, где я намерен хранить большую часть данных и логики моего приложения (например, вычисляя радианы из градусов и, таким образом, определяя координаты, в которых должны находиться мои фигуры). Я очень новичок в Angular и TypeScript и чувствую, что упускаю что-то очевидное. Если бы кто-нибудь мог сказать мне, что это такое, или просто указать мне правильное направление и дать ссылку на соответствующие документы, я был бы очень благодарен. иллюстрация того, где, по моему мнению, проблема

Прямо сейчас я сохраняю только случайное число в качестве значения свойства «degrees», но позже я хочу подключить его к вводу.

 import { ViewChild, Component, OnInit, ElementRef } from "@angular/core";
import { CircleApp } from "./circleApp";
@Component({
  selector: "app-make-circle",
  templateUrl: "./make-circle.component.html",
  styleUrls: ["./make-circle.component.css"]
})
export class MakeCircleComponent implements OnInit {
  circleApp: CircleApp = {
    degrees: 3,
    degreesToRadiansFlipped: function(degree) {
      return (-degree * Math.PI) / 180;
    },
    radian: this.circleApp.degreesToRadiansFlipped(this.circleApp.degrees),
    x: Math.cos(this.circleApp.radian * 200   500),
    y: Math.sin(this.circleApp.radian * 200   500)
  };
  @ViewChild("myCanvas") myCanvas: ElementRef;
  public context: CanvasRenderingContext2D;
  constructor() {}
  ngOnInit() {}
  ngAfterViewInit(): void {
    this.context = (this.myCanvas
      .nativeElement as HTMLCanvasElement).getContext("2d");
    this.draw();
  }
  private draw() {
    this.context.beginPath();
    this.context.arc(500, 300, 200, 0, Math.PI * 2);
    this.context.moveTo(500, 300);
    this.context.lineTo(this.circleApp.x, this.circleApp.y);
    this.context.stroke();
  }
}

Комментарии:

1. Что такое CircleApp ? Как это выглядит в ./circleApp ? Можете ли вы добавить это к сообщению?

2. Это экспорт класса typescript, где я определяю, к каким типам относится каждое свойство CircleApp. В этом случае он говорит только: экспортировать класс CircleApp { degrees: number; }

Ответ №1:

На самом деле, эти строки являются проблемой (хорошо, может быть, это просто проблема):

     radian: this.circleApp.degreesToRadiansFlipped(this.circleApp.degrees),
    x: Math.cos(this.circleApp.radian * 200   500),
    y: Math.sin(this.circleApp.radian * 200   500)

this.circleApp ссылается на this.circleApp , который еще не создан. В упрощенной форме вы пытаетесь сделать это:

 let foo = { a: "A", b: foo.a   "B" };

Если вы замените ссылки this.circleApp с правой стороны на некоторые числовые значения или закомментируете их, ошибка исчезнет.

Вам просто нужно инициализировать circleApp каким-либо другим способом. Если это класс, просто поместите this.circleApp = new CircleApp(/* parameters here */) его где-нибудь достаточно рано в жизненный цикл компонента, например ngOnInit .

Комментарии:

1. Спасибо, я переместил ссылки этого.circleApp в @ngAfterViewInit(), и теперь он работает нормально.

Метки: