如何在 Angular 中的组件之间调用动态 function

Question

I'm new to angular and I'm planning on making a dynamic function on my app. I wanted a dynamic function (ex. Parent component is called, the buttonclick function on the child component will do a console.log, while when parent2 component is called, the buttonclick function will do an alert dialog). Is it possible to call a dynamic function with different implementations for each component? How will I do it?

child.component.ts

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

@Component({
  selector: 'app-child',
  template : '<button click()="dynamicFunction()">Click!</button>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  dynamicFunction(){
     //do nothing
  }  

  ngOnInit() {  

  }

}

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template : '<app-child></app-child>',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  dynamicFunction(){
      console.log('parent 1 clicked');
  }  

  ngOnInit() {  

  }

}

parent2.component.ts

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

@Component({
  selector: 'app-parent2',
  template : '<app-child></app-child>',
  styleUrls: ['./parentTwo.component.css']
})
export class ParentTwoComponent implements OnInit {

  constructor() { }

  dynamicFunction(){
      alert('parent 2 was called');
  }  

  ngOnInit() {  

  }

}

Answer 1

Function shared in angular using service

In angular you can create service and share that service as provider in all the function. The methods/function in the service can be called from any component including child or non child

Answer 2

Suppose I have created a custom filter service that can be use from components.

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({
      name: 'filter'
    })
    export class CustomFilterPipe implements PipeTransform {
      transform(items: any, filter: any, defaultFilter: boolean): any {
        debugger;
        if (!filter) {
          return items;
        }

        if (!Array.isArray(items)) {
          return items;
        }

        if (filter && Array.isArray(items)) {
          let filterKeys = Object.keys(filter);

          if (defaultFilter) {
            return items.filter(item =>
              filterKeys.reduce((x, keyName) =>
                (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
          }
          else {
            return items.filter(item => {
              return filterKeys.some((keyName) => {
                return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
              });
            });
          }
        }
      }
    }

book-location-name.component.html

<table class="table table-bordered bordered table-striped table-condensed table-text table-scroll table-hover">
          <thead class="thead">
            <tr>
              <th style="width:5%;">Sl</th>
              <th style="width:30%;">Location Name &nbsp;</th>
              <th style="width:25%;">Location Code &nbsp;</th>
              <th style="width:15%;">Is Active &nbsp;</th>
              <th style="width:25%;">Action&nbsp;</th>
              <th *ngIf="LocationNameList.length>5" style=" width: 2%;"></th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let dataModel of LocationNameList| filter : {LocationName: searchText, LocationCode:searchText} | paginate: config; let i=index">
              <td style="display:none">{{dataModel.BlnId}}</td>
              <td style="width:5%;"> {{i+1}}</td>
              <td style="width:30%;"> {{dataModel.LocationName}}</td>
              <td style="width:25%;"> {{dataModel.LocationCode}}</td>
              <td style="width:15%;">
                <span class="badge" [ngClass]="{'badge-success':dataModel.IsActive, 'badge-secondary':!dataModel.IsActive}">{{dataModel.IsActive==true?'Active':'Inactive'}}</span>
              </td>
              <td>
                <i (click)="editData(dataModel)" class="cui-note icons font-2xl mt-4" style="cursor:pointer;"></i>
                &nbsp;&nbsp;&nbsp;
                <i (click)="showConfirmationModal(2,dataModel.BlnId)" class="cui-trash icons font-2xl mt-4" style="cursor:pointer;"></i>
              </td>
            </tr>
          </tbody>
        </table>

Then in app.module.ts add import { CustomFilterPipe } from '../filter.pipe'

And call it from your components like book-location-name.component.ts file.

Hope it's help you.