Hiển thị đơn vị tiền tệ âm với dấu ngoặc đơn trong Angular 2/Typescript

Question

Tính năng địa phương hóa của chúng tôi được cập nhật từ 1.3 để hiển thị đơn vị tiền tệ âm với dấu âm thay vì dấu ngoặc đơn. Tôi đang sử dụng AngularJS 2/Typescript và muốn ghi đè lên các dấu hiệu mặc định tiêu cực với dấu ngoặc đơn (hoặc thậm chí cái gì khác).

Discussion trên chương trình này để ghi đè negPre & negSuf tuy nhiên tôi không thấy cách thực hiện việc này với Angular2. Hoặc có thể là một cách thanh lịch hơn để đạt được điều này.

Answer 1

Tôi đánh giá cao việc bạn đặt câu hỏi tuyệt vời này. Tất nhiên ống tiền tệ không tồn tại, nhưng sau khi quét các current pipe documentation có vẻ như là ra khỏi hộp này ống sẽ không làm những gì bạn muốn. Tuy nhiên, bạn có thể hoàn thành mục tiêu của mình bằng một đường ống tùy chỉnh.

1. Trước tiên, hãy nhận ra rằng bạn có thể "chuỗi đường ống".

Ví dụ, bạn có thể có một biến kiểu số, gửi nó qua các ống tệ, và sau đó gửi nó qua ống tùy chỉnh của riêng bạn:

<h1>{{someNumber | currency:'USD':true | myCustomPipe}}</h1> 

2. thừa nhận rằng các ống tệ trả về một chuỗi.

Điều này có nghĩa là đường ống tùy chỉnh của bạn có thể chấp nhận một chuỗi, thực hiện một số thao tác chuỗi và trả lại chuỗi mới.

3. Nhận ra rằng thuật toán thao tác chuỗi đi từ dấu trừ sang dấu ngoặc đơn không thực sự phức tạp.

Logic có thể được diễn giải bằng tiếng Anh như sau ký tự đầu tiên và nối thêm một chuỗi một dấu ngoặc đơn ở hai bên của nó ". Sử dụng toán tử ternary JavaScript, nó có thể trông giống như sau:

value.charAt(0) === '-' ? 
'(' + value.substring(1, value.length) + ')' : 
value; 

Tôi cũng đã tạo một đường ống đẹp làm ví dụ này làm việc tối thiểu. Giả sử bạn có thành phần này hiển thị biến số someNumber có giá trị là -5 (số âm năm).

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h2>MinusSignToParens Pipe Demo</h2> 
    <h1>{{someNumber | currency:'USD':true | minusSignToParens}}</h1> 
    ` 
}) 
export class App implements OnInit { 

    private someNumber:any = -5; 

    constructor() {} 

    ngOnInit() {} 
} 

Và đây là mã cho các đường ống minusSignToParens:

@Pipe({ 
    name: 'minusSignToParens' 
}) 
export class MinusSignToParens implements PipeTransform { 

    transform(value: any, args?: any): any { 
    return value.charAt(0) === '-' ? 
      '(' + value.substring(1, value.length) + ')' : 
      value; 
} 

Đây là the example in a Plunkr nếu bạn muốn chơi đùa với nó.

Và hãy nhớ rằng, như Migos sẽ nói, hãy đặt ống lên!