Я пытаюсь сделать с угловым что-то похожее на карты 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);
}
В идеале я хотел бы создать небольшое всплывающее окно, где пользователь нажимал бы форму для заполнения.
Передайте данные координат созданному компоненту
<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 с помощью выбранных пользователем компонентов