Question

我有一个my-button组件，它应该包含在my-button-row组件中，如下所示：

<my-button-row>
    <my-button [label]="Some Label" (click)="func1($event)"></my-button>
    <my-button [label]="Some Other Label" (click)="func2($event)"></my-button>
</my-button-row>

当我阅读my-button中的@ContentChildren个组件时，我找不到分配给它们的(click)个处理程序。

export class MyButtonRowComponent {
    @ContentChildren(MyButtonComponent) buttons: QueryList<MyButtonComponent>;

    ngAfterContentInit() {
        // where is the (click) setting?
        console.log(this.buttons); 
     }
}

console.log(this.buttons)的结果是QueryList MyButtonComponents，其中没有指定的click事件或类似事件。如何找出哪些事件处理程序已分配给ContentChildren？

为什么我要这样做：

我想用一些可定制的my-button包装器逐个包装我的内容子div组件。所以来自：

<my-button-row>
    <my-button [label]="Some Label" (click)="func1($event)"></my-button>
    <my-button [label]="Some Other Label" (click)="func2($event)"></my-button>
</my-button-row>

到此：

<my-button-row>
    <div class="styleme">
        <my-button [label]="Some Label" (click)="func1($event)"></my-button> 
    </div>
    <div class="styleme">
        <my-button [label]="Some Other Label" (click)="func2($event)"></my-button>
    </div>
</my-button-row>

我发现创建动态组件的所有解决方案都不合适，因为它们确实创建了新组件，但(click)="func1($event)"在此过程中丢失了。

Answer 1

如果你想用其他标签包围一些标签，你不应该依赖自己的DOM操作：自己操纵DOM在Angular中是一种不好的做法。

相反，创建一个包围标签的包装器组件。

这样的事情： Stackblitz

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-surrounder',
  template: `
<div class="styleme">
    <ng-content></ng-content>
</div>
`,
  styleUrls: ['./surrounder.component.css']
})
export class SurrounderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 2

更好的方法是在my-button组件本身中设置样式。如果您需要为my-button的不同实例使用多个样式，可以使用您要在该特定组件实例上使用的样式的id注入@Input。

如何从@ContentChildrent获取事件处理程序？

2 个答案: