เป็นไปได้ไหมที่จะใช้ท่อในรหัส?


106

เมื่อฉันใช้ไปป์ที่กำหนดเองในเทมเพลตมันจะเป็นดังนี้:

{{user|userName}}

และทำงานได้ดี

เป็นไปได้ไหมที่จะใช้ท่อในรหัส?

ฉันพยายามใช้มันดังนี้:

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

แต่มันแสดงให้เห็น

ไม่ได้กำหนด userName

วิธีอื่นของฉันคือการใช้db.collection.findOne()โค้ดด้วยตนเอง แต่มีวิธีใดที่ชาญฉลาด?


คุณไม่สามารถใช้เทมเพลตแบบนี้ได้คุณต้องฉีดท่อเข้าไปในโครงร่างของคุณ
Yoann Prot

ขอโทษฉันจะทำให้มันชัดเจน ฉันฉีดท่อแล้ว
Hongbo Miao

ท่อใดที่คุณพยายามใช้ในรหัส นี่คือท่อที่คุณกำหนดเองหรือไม่?
ศิวะ

1
ฉันไม่คิดว่าคุณจะทำได้เนื่องจาก...Angular ไม่ได้ดำเนินการ เป็นการแก้ไขสตริง ES6 ...
Thierry Templier

5
ดูว่าสิ่งนี้ช่วยให้stackoverflow.com/questions/35144821/…
ศิวา

คำตอบ:


115

ขั้นแรกให้ประกาศท่อในprovidersโมดูลของคุณ:

import { YourPipeComponentName } from 'your_component_path';

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

จากนั้นคุณสามารถใช้@Pipeในส่วนประกอบเช่นนี้:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

1
ดูดี! แต่ด้วยเหตุผลบางประการการฉีดแบบพึ่งพาไม่สามารถฉีดท่อของฉันเข้าไปในตัวสร้างแม้ว่าจะสามารถใช้ใน html ได้โดยไม่มีปัญหาก็ตาม มีการประกาศและส่งออกในโมดูลอื่นอาจจะต้องอยู่ในรายชื่อผู้ให้บริการด้วย? อย่างไรก็ตามการสร้างและใช้อินสแตนซ์ใหม่ของ MyPipe จะใช้งานได้ เพียง DI มีปัญหา ...
แซม

19
@ แซมแน่นอนว่ามันต้องอยู่ในไฟล์providers. เพิ่มYouPipeComponentNameลงในของคุณprovidersและวิธีนี้จะทำงานได้อย่างสมบูรณ์
SrAxi

4
ตรวจสอบให้แน่ใจว่าคุณเพิ่มไปยังผู้ให้บริการที่ถูกต้อง หากคุณต้องการใช้ไปป์ทั่วโลกให้วางไว้ในแอปผู้ให้บริการโมดูล หากคุณต้องการใช้เฉพาะในโมดูลที่โหลดอย่างเกียจคร้านให้วางไว้ในผู้ให้บริการโมดูลที่เกี่ยวข้อง
Phil

เส้นทางการนำเข้าไม่ถูกต้อง เคยชินท่อโดยมีอยู่ภายใต้ @ angular / common
Andris

@ แอนดริสฉันแก้ไขแล้ว มันเป็นความผิดพลาด. ฉันหมายความว่าคุณต้องนำเข้าโมดูลท่อของคุณ
saghar.fadaei

107

@ ศิวะถูกต้อง. และขอบคุณ!

ดังนั้นวิธีใช้ท่อในส่วนประกอบจึงเป็นดังนี้:

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

ลิงก์ไปยังคำถามอื่นที่คล้ายกัน


3
วิธีนี้ใช้ได้ผล แต่อาจไม่เป็นไปตามแนวทางปฏิบัติที่ดีที่สุดเชิงมุม / รูปแบบที่ต้องการ การส่งท่อเข้าไปในคอนสตรัคเตอร์เป็นการพึ่งพาส่วนประกอบดังที่แสดงให้เห็นในคำตอบอื่น ๆ คือ "ถูกต้องมากกว่า"
Josh

ไม่มีปัญหาด้านประสิทธิภาพเมื่อใช้วิธีนี้หรือไม่? บางคนอาจจะใช้ตลอดเวลา!
Mohammad Kermani

2
นี่เป็นวิธีการใช้ท่อที่ผิดอย่างสิ้นเชิง Pipes เป็นคลาสสำหรับวัตถุประสงค์พิเศษและควรใช้ด้วยวิธีพิเศษที่ Angular มีให้ หากคุณต้องการฟังก์ชันบางอย่างที่นำไปใช้ในไพพ์ แต่ใช้วิธีนี้เหมือนกับคลาส TypeScript ทั่วไปคุณต้องสร้างregularคลาสนั้นและใช้ในรหัส TS ของคุณ ( your-component.tsตัวอย่างเช่น) หากคุณต้องการฟังก์ชันเดียวกันในท่อคุณสามารถใช้regularคลาสนั้นจากท่อได้เช่นกัน
Alexander Abakumov

ความแตกต่างที่ใหญ่ที่สุดคือคุณสร้างอินสแตนซ์ของคลาสมากขึ้นด้วยวิธีนี้ ด้วยการใช้ไวยากรณ์ Angular มันจะทำงานเหมือน Singelton และสร้างอินสแตนซ์เพียงครั้งเดียว
Sir2B
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.