如何在 Angular 中的組件之間調用動態 function

Question

我是 angular 的新手，我計划在我的應用程序上制作動態 function。 我想要一個動態的 function （例如，調用父組件，子組件上的按鈕單擊 function 將執行 console.log，而當調用 parent2 組件時，按鈕單擊 ZC1C425268E68385D1AB4Z5074C 將執行警報對話框）7A94F 是否可以為每個組件調用具有不同實現的動態 function？ 我將如何做？

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() {  

  }

}

父組件.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 共享在 angular 使用服務

在 angular 中，您可以在所有 function 中創建服務並作為提供者共享該服務。 可以從任何組件調用服務中的方法/函數，包括子組件或非子組件

Answer 2

假設我創建了一個可以從組件中使用的自定義過濾器服務。

過濾器.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] == "";
              });
            });
          }
        }
      }
    }

書籍位置名稱.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>

然后在 app.module.ts 添加import { CustomFilterPipe } from '../filter.pipe'

並從您的組件中調用它，例如book-location-name.component.ts文件。

希望對你有幫助。