Có thể sử dụng một đường ống trong mã không?


103

Khi tôi sử dụng đường ống tùy chỉnh của mình trong một mẫu, nó sẽ như thế này:

{{user|userName}}

Và nó hoạt động tốt.

Có thể sử dụng một đường ống trong mã không?

Tôi cố gắng sử dụng nó như thế này:

let name = `${user|userName}`;

Nhưng nó cho thấy

userName không được xác định

Cách thay thế của tôi là sử dụng db.collection.findOne()thủ công trong mã. Nhưng có cách nào thông minh không?


Bạn không thể sử dụng mẫu như thế này, bạn phải đưa đường ống vào bộ cấu trúc của mình
Yoann Prot

xin lỗi, tôi sẽ nói rõ. Tôi đã tiêm đường ống
Hongbo Miao

Bạn đang cố gắng sử dụng đường ống nào trong mã? Đây có phải là đường ống tùy chỉnh của bạn không?
Siva

1
Tôi không nghĩ rằng bạn có thể làm được vì ...Angular không thực thi. Nó ES6 chuỗi suy ...
Thierry Templier

5
Xem liệu điều này có giúp stackoverflow.com/questions/35144821/…
Siva

Câu trả lời:


111

Đầu tiên khai báo đường ống trong providersmô-đun của bạn:

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

Sau đó, bạn có thể sử dụng @Pipetrong một thành phần như sau:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

1
Có vẻ tốt đẹp! Nhưng vì lý do nào đó, việc tiêm phụ thuộc không thể đưa đường ống của tôi vào hàm tạo, mặc dù nó có thể được sử dụng trong html mà không gặp vấn đề gì. Nó được khai báo và xuất trong một mô-đun khác, có lẽ nó cũng cần phải có trong danh sách nhà cung cấp? Tuy nhiên, việc tạo và sử dụng một phiên bản MyPipe mới vẫn hoạt động. Chỉ có DI có vấn đề ...
Sam

19
@Sam Thật vậy, nó cần phải ở trong providers. Thêm YouPipeComponentNamevào của bạn providersvà phương pháp này sẽ hoạt động hoàn hảo.
SrAxi

4
Đồng thời đảm bảo rằng bạn thêm nó vào đúng nhà cung cấp. Nếu bạn muốn sử dụng đường ống trên toàn cầu, hãy đặt nó vào các nhà cung cấp app.module. Nếu bạn chỉ muốn sử dụng nó trong một số mô-đun được tải
Phil

Đường dẫn nhập sai. Ống sẽ không bởi dưới có sẵn @ góc / common
Andris

@Andris Tôi đã chỉnh sửa nó. Đó là một sai lầm. Ý tôi là bạn phải nhập mô-đun đường ống của bạn.
saghar.fadaei

107

@Siva là chính xác. Và cảm ơn!

Vì vậy, cách sử dụng đường ống trong thành phần là như sau:

let name = new UserNamePipe().transform(user);

Liên kết đến một câu hỏi tương tự khác.


3
Điều này hoạt động, nhưng nó có thể không tuân theo các phương pháp hay nhất về Angular / các mẫu ưa thích. Việc chuyển đường ống vào hàm tạo dưới dạng phụ thuộc thành phần, như được minh họa trong câu trả lời khác, là "đúng hơn".
Josh

không có bất kỳ vấn đề hiệu suất sử dụng theo cách này? một số người có thể sử dụng nó mọi lúc!
Mohammad Kermani

2
Đây là một cách sử dụng đường ống hoàn toàn sai lầm. Pipes là một lớp mục đích đặc biệt và nên được sử dụng thông qua các phương tiện đặc biệt do Angular cung cấp. Nếu bạn cần một số chức năng được triển khai trong một đường ống, nhưng theo cách sử dụng nó như một lớp TypeScript thông thường, thì bạn phải tạo regularlớp đó và sử dụng nó trong mã TS của mình ( your-component.tsví dụ). Nếu bạn cần chức năng tương tự trong đường ống, bạn luôn có thể sử dụng regularlớp đó từ đường ống.
Alexander Abakumov

Sự khác biệt lớn nhất là bạn tạo ra nhiều thể hiện của lớp hơn bằng cách này. Với việc sử dụng cú pháp Angular, nó hoạt động giống như một singelton và chỉ được khởi tạo một lần.
Sir2B
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.