Создание компонента вместо события клика

1

Я пытаюсь сделать с угловым что-то похожее на карты Google. Поэтому у меня есть фоновое изображение/карта, и я хотел бы создать объект/компонент вместо карты, где пользователь щелкнул мышью.

Сейчас я получаю значения x/y. Но я не уверен, что делать после события click.

getCoordinates(event): Coordinates {
    let offsetLeft = document.getElementById("drawing").offsetWidth;
    let offsetTop = document.getElementById("drawing").offsetHeight;
    let x = event.pageX - (document.getElementById("drawing").offsetLeft);
    let y = event.pageY - (document.getElementById("drawing").offsetTop);
    console.log("zoom " + this.zoom);
    console.log("x " + x / this.zoom);
    console.log("y " + y / this.zoom);
    console.log("element " + offsetLeft);
    console.log("element " + offsetTop);
    return new Coordinates(x,y);
  }

В идеале я хотел бы создать небольшое всплывающее окно, где пользователь нажимал бы форму для заполнения.

Теги:
angular

1 ответ

2
Лучший ответ

Передайте данные координат созданному компоненту

<my-component *ngFor="let cmp of components" [info]="cmp"></my-component>

export class ParentComponent {
  components:Coordinates[] = [];

  getCoordinates(event): Coordinates {
    let offsetLeft = document.getElementById("drawing").offsetWidth;
    let offsetTop = document.getElementById("drawing").offsetHeight;
    let x = event.pageX - (document.getElementById("drawing").offsetLeft);
    let y = event.pageY - (document.getElementById("drawing").offsetTop);

    this.components.push(new Coordinates(x,y));
  }
}

сделать позицию компонента самой

export class MyComponent {
  @Input() info:Coordinates;

  @HostBinding('style.left.px')
  get left() { return this.info.left; }

  @HostBinding('style.top.px')
  get top() { return this.info.top; }
}

Пример плунжера

Если вы хотите добавить различные компоненты, вы можете расширить подход, используя идеи из динамических вкладок Angular 2 с помощью выбранных пользователем компонентов

Поделиться
  • 0
    Это хорошая практика, чтобы использовать Javascript что-то вроде getElementById в Angular2?
  • 1
    Не уверен, что именно ты имеешь в виду. Вообще или как-то связано с этим вопросом? Связки Typescript и Angular переводятся в JS, поэтому вы не можете избежать JS. Вы имеете в виду JS вместо TypeScript или использование JS-библиотек, таких как jQuery?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню