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

问题描述

大家下午好，我有以下结构:

Good afternoon guys, i have the following structure:

父.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()，但我有很多功能，我更愿意绑定所有将此容器内的事件传递给子组件.

when I click on it, the function is triggered on the parent component, i know i can use View to get the child component and use as child.clica(), but i have many functions and i would prefer to bind all the events inside of this container to the child component.

有没有办法做到这一点?

Is there any way to do this?

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

Sorry if it's confusing, it's complicated to explain.Thanks!

推荐答案

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

If you are clear with javascript functionality and Angular, Here is the trickier way to go :

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
}

工作演示

注意:我也只是为了好玩而探索了解决方案，但它确实是酷

您可以通过多种方式在子组件中加载父组件阅读.

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

这篇关于如何在<ng-container>内捕获事件触发器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！