我有一个基于角度的应用程序(当前版本为v4.4)。我有一个视图,一个组件在有限次数的情况下显示它自己的一个实例,然后在最低的“子”组件中有一个svg。点击没有触发父组件的点击事件父组件上的点击事件
我希望能够拾取使用(click)
事件点击过的最低组件。我认为我可以设置z-index链接到迭代编号,以便每个后续的子组件都出现在父节点的顶部,因此当单击该区域中的任何位置时,就会触发正确的事件。
我在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的组件。
您是否试过css解决方案?当您只需要子事件触发器时,父项的“指针事件”可以是“无”。 –
@EmadEmami我想发起一个角度事件,因为我最终想要使用点击组件的迭代值来导航 –