@ContentChildrentからイベントハンドラーを取得するにはどうすればよいですか？

debugcn 投稿 Dev

ローレンツ・メルディアン

次のようなコンポーネントに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コンポーネントを1つずつスタイリング可能な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)"、プロセス中に失われます。

user4676340

一部のタグを他のタグで囲みたい場合は、独自の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() {
  }

}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-3

コメントを追加

サインイン

分類Dev

Related 関連記事

記事