親コンポーネントのクリックイベントを発生せずに子コンポーネントをクリック

Question

私は角度ベースのアプリケーション（現在v4.4）を持っています。私は、コンポーネントが有限の回数だけ自分自身のインスタンスを表示し、次に最も低い「子」コンポーネントに、svgがあるビューを持っています。

(click)イベントを使用してクリックされた最小のコンポーネントを取り込めます。後続の各子コンポーネントが親の上に表示されるように、Z-インデックスを反復番号にリンクするように設定できると思ったので、その領域のどこかをクリックすると、正しいイベントが発生します。

私はこれをplunkrにdemoとしました。 svgをクリックしてもクリックされたイベントは発生しませんが、ボックス内の他の領域をクリックすると、そのボックスとそのすべての親に対してクリックされたイベントが発生します。

すべてのボックスの色を独立に切り替えることができるようにしたいと思います。ここで

は、私が持っているコンポーネントです。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <my-child [iteration]="0"></my-child> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@Component({ 
    selector: 'my-child', 
    template: ` 
    <div class="border" [style.background]="toggle ? 'green' : 'pink'" (click)="clicked()"> 
    {{iteration}} 
     <my-child [iteration]="iteration" *ngIf="iteration < 3"></my-child> 
     <object *ngIf="iteration == 3" 
     id="img" width="300" height="300" 
     data="http://snapsvg.io/assets/images/logo.svg"></object> 
    </div> 
    `, 
}) 
export class Child { 
    name:string; 
    @Input() iteration; 
    toggle: boolean; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    this.toggle = false; 
    } 
    ngOnInit() { 
    ++this.iteration; 
    } 
    clicked(){ 
    this.toggle = !this.toggle; 
    console.log(this.iteration) 
    } 
} 

はUPDATE：

現在の答えは、この質問の最初の部分に答えるが、SVGクリックがためにクリックイベントを発火ないに対処していませんsvgを表示するコンポーネント。

Answer 1

event.stopPropagation();子要素のクリックハンドラの上部にあります。これを他のイベントハンドラに追加する必要があるかもしれません。

また、あなたが試みることができるCSS：親の #parentElement { pointer-events: none; }、および子要素に .childElement { pointer-events: auto; }。

それぞれのIDとクラス名を親と子にそれぞれ追加します。

Answer 2

あなたのプランナーで成功しました。あなたのcliked機能のトップにするevent.stopPropagation（）を使用する必要がありますが、あなたはまた、このように、あなたのクリックアクションで$イベントを追加する必要があります：あなたが持っている必要がありますあなたのhtmlで

(click)=clicked($event) 

your.tsで

があなたのstopPropagationを追加します。

clicked(event) { 
    event.stopPropagation(); 
} 

EDIT： あなたの最後の層のためのソリューション、SVG要素の上に目に見えないのdivを使用して、あなたは、スタイルや位置を適応させる必要がある場合があります。

<div style="width:300px; height:300px; position:absolute; z-index:1000"> 
</div> 
<object *ngIf="iteration == 3" 
     id="img" width="300" height="300" 
     data="http://snapsvg.io/assets/images/logo.svg"> 
</object>