typescript - สร้างฟังก์ชันระดับโลกที่สามารถใช้ในเทมเพลตของ angular 4

ฉันต้องการสร้างฟังก์ชันที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งสามารถใช้ในเทมเพลต Angular ได้ ฉันได้สร้างฟังก์ชันดังนี้:

 export function stringSplit(string : string, separator : string = '/') : any {
    return string.split(separator);
}

ฉันได้พยายามเพิ่มเข้าไปในเทมเพลตแบบนี้:

<p> stringSplit('hello/user') </p>

แต่ฉันกำลังได้รับข้อผิดพลาดนี้:

ERROR TypeError: _co.stringSplit is not a function

ฉันไม่แน่ใจว่าเราจะสร้างและใช้ฟังก์ชันระดับโลกใน Angular ได้อย่างไร

เราสามารถทำการปฏิบัติการนี้ใน Angular ได้หรือไม่?

อะไรคือวิธีแก้ปัญหาที่ดีที่สุดในสถานการณ์นี้?

คำตอบ #1

คำตอบคือคุณ ไม่ควร Dependency Injection เป็นเครื่องมือที่ทรงพลังที่ Angular มอบให้โดยมีวัตถุประสงค์เดียวคือการแบ่งปันฟังก์ชันการทำงานข้ามคอมโพเนนต์โดยไม่ต้องรักษาขอบเขตแบบทั่วโลก สิ่งที่คุณควรทำจริงๆ คือสร้างเซอร์วิส เพิ่มเมธอดเข้าไป ฉีดเซอร์วิสของคุณเข้าไปในคอมโพเนนต์ที่ต้องการ และเรียกใช้งานที่นั่น

จากคำถามของคุณ น่าจะดีถ้ามี pipe เพื่อทำการดำเนินการที่คุณต้องการ Pipe ถูกใช้เพื่อจัดการข้อมูลภายในเทมเพลตใด ๆ (ทำให้ฟังก์ชันนั้นแทบจะเป็นสากลสำหรับเทมเพลตทั้งหมดที่เป็นของคอมโพเนนต์ที่เป็นของโมดูลซึ่งเป็นผู้ประกาศหรือใช้ import pipe) คุณสามารถเขียนแบบนี้:

@Pipe({name: 'splitString'})
export class SplitString implements PipeTransform {
  transform(value: string, separator: string): string[] {
     return value.split(separator);   
  }
}

และใน html ของคุณ:

<p>{{ myString | splitString : ',' }} </p>

อ่านข้อมูลเพิ่มเติมเกี่ยวกับท่อที่นี่

คำตอบ #2

โดยทั่วไปแล้วถือว่าเป็นแนวทางปฏิบัติที่ไม่ดี
แต่ถ้าคุณจำเป็นต้องใช้ฟังก์ชัน global นี้ คุณสามารถเพิ่มมันเป็นสมาชิกภายในคอมโพเนนต์ของคุณได้ ที่ส่วนหนึ่งของโค้ด:

export function stringSplit(string : string, separator : string = '/') : any {
    return string.split(separator);
}

ในคอมโพเนนต์ของคุณ:

import {stringSplit} from '....'
...
class MyComponent {
  public stringSplit = stringSplit;
}

จากนั้นในเทมเพลต:

<p> stringSplit('hello/user') </p>

แต่ตามที่ฉันได้กล่าวไว้แล้ว นี่เป็นการปฏิบัติที่ไม่ดี ควรพิจารณาใช้บริการ/ท่อแทน