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

问题描述

下午好，我的结构如下:

Good afternoon guys, i have the following structure:

parent.html

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

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.

有什么办法吗?

很抱歉，如果混淆，解释起来很复杂.谢谢！

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
}

工作演示

WORKING DEMO

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

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

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