クリックしたイベントの代わりにコンポーネントを作成する

Question

私はgoogleマップと同じような角度の何かをしようとしています。だから私は背景画像/マップを持っていて、私はマウスのクリックした地図の代わりにオブジェクト/コンポーネントを作成したいと思います。

今はx/y値を取得しています。しかし、私はクリックイベントの後に何をすべきか分かりません。

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); 
    } 

理想的には、ユーザーがフォームをクリックして埋め込む場所に小さなポップアップを生成したいと考えています。

Answer 1

作成したコンポーネント

<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; } 
} 

Plunker Example

を作るには、座標情報を渡しますアイデアを使用して上記のアプローチを拡張してからAngular 2 dynamic tabs with user-click chosen components