如何在 <ng-container> 中捕获事件触发器

Question

大家下午好，我的结构如下：

parent.html

<child-component>
<ng-template let-dataSource="dataSource" let-displayedColumns="dc">
  <mat-table class="cruds-table" [dataSource]="dataSource" matSort fusePerfectScrollbar>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Nome</mat-header-cell>
        <mat-cell *matCellDef="let crud">
          <p class="text-truncate" (click)="clica()">{{crud.name}}</p>
        </mat-cell>
      </ng-container>
 [...]</ng-template>
</child-component>

child.html

<ng-container *ngTemplateOutlet="contentTable;context:{dataSource: dataSource, dc: displayedColumns}"></ng-container>

child.ts

clica(){
    alert('clicked');
}

当我点击它时，该功能在父组件上触发，我知道我可以使用 View 获取子组件并用作 child.clica()，但我有很多功能，我会更喜欢将此容器内的所有事件绑定到子组件。

有什么办法吗？

对不起，如果它令人困惑，解释起来很复杂。谢谢！

Answer 1

您可以在 child 组件上设置一个 EventEmitter 并绑定到 parent 组件中的那个事件。

里面child.ts

@Output
clickEvent: EventEmitter<any> = new EventEmitter();
...
click() {
    this.clickEvent.emit(eventArgs);
}

parent.html

<child-component (clickEvent)="someFuncOnParent()"></child-component>

parent.ts

someFuncOnParent(event) { 
    //event args can be passed to parent here 
}

如果你想换个方向，你可以在 child 上使用 @Input 和 EventEmitter，就像这样。

child.ts

@Input
clica: EventEmitter<any> = new EventEmitter();

ngOnInit() {
    this.clica.subscribe(() => alert('clicked'));
}

parent.html

<child-component [clica]="parentClickEvent">
<ng-template>
  <button (click)="parentClick()">
    Click Me!
  </button>
</ng-template>
<child-component>

parent.ts

parentClickEvent: EventEmitter<any> = new EventEmitter();

parentClick() {
    this.parentClickEvent.next();
}

https://stackblitz.com/edit/angular-oyxkwb

Answer 2

如果您对 javascript 功能和 Angular 很清楚，这是更棘手的方法：

constructor(app:AppComponent){ //<-- get the ref of the parent component
    app['clic'] = this.clic; //<-- declare function and bind our function 
    this.name = 'myself';
}

clic(){
    alert('clicked');
}

ngOnDestroy() {
    delete this.app['clic']; // <-- get rid of the function from parent component, when we are done
}

WORKING DEMO

NOTE : I have also explored the solution just for fun, but it's really cool

You can load parent component in child in many ways DO READ.

Answer 3

比较简单的方法：

child:

<ng-container *ngTemplateOutlet="contentTable;context:{dataSource: dataSource, dc: displayedColumns, clica: clica}"></ng-container>

parent:

<ng-template let-dataSource="dataSource" let-displayedColumns="dc" let-clica="clica">

如何在 <ng-container> 中捕获事件触发器

How to catch an event trigger inside of a <ng-container>

angularjs-directive

angular