स्ट्रिंग को कोणीय 2 में कैसे बदलें?

Question

मैंने HTML पृष्ठ में नीचे इंटरपोलेशन के साथ उपयोग किया है।

<div>{{config.CompanyAddress.replace('\n','<br />')}}</div> 

और भी

<div>{{config.CompanyAddress.toString().replace('\n','<br />')}}</div> 

इस्तेमाल किया लेकिन दोनों नीचे

{{config.CompanyAddress.replace('\n','<br />')}} 
{{config.CompanyAddress.toString().replace('\n','<br />')}} 

Answer 1

आप एक ही के लिए एक पाइप का उपयोग कर सकते हैं:

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({name: 'replaceLineBreaks'}) 
export class ReplaceLineBreaks implements PipeTransform { 
    transform(value: string): string { 
    let newValue = value.replace(/\n/g, '<br/>'); 
    return `${newValue}`; 
    } 
} 

पाइप अपने @NgModule घोषणाओं में शामिल किया जाना चाहिए ऐप्लिकेशन में शामिल किया जाना है। अपने टेम्पलेट में एचटीएमएल दिखाने के लिए आप बाइंडिंग बाहरी HTML का उपयोग कर सकते हैं।

<span [outerHTML]="config.CompanyAddress | replaceLineBreaks"></span> 

Answer 2

{{}} स्ट्रिंग प्रक्षेप के लिए है और परिणाम हमेशा स्ट्रिंग के रूप में जोड़ दिया जाएगा के रूप में पाठ दिखा रहे हैं। < और > अभिव्यक्ति में निहित {{}} की अपेक्षा के अनुसार बाध्यकारी इस मामले में बिल्कुल भी काम नहीं करता है।

<div [innerHTML]="replaceLineBreak(config.CompanyAddress) | safeHtml"></div> 

replaceLineBreak(s:string) { 
    return s && s.replace('\n','<br />'); 
} 

साथ तुम क्या चाहते क्या करना चाहिए। जैसा कि @hgoebl replaceLineBreak द्वारा वर्णित किया गया है, पाइप के रूप में भी लागू किया जा सकता है यदि आपको कई स्थानों पर इसकी आवश्यकता है।

Plunker example

सुझाव: यह है, क्योंकि विधि हर बदलाव का पता लगाने चक्र में कहा जाता है सीधे तरीकों से आबद्ध होने हतोत्साहित है। एक शुद्ध (डिफ़ॉल्ट) पाइप केवल तभी कॉल किया जाता है जब इनपुट मान बदलता है। इसलिए एक पाइप अधिक कुशल है।

एक और तरीका प्रतिस्थापन केवल एक बार करना है और replaceLineBreak को बार-बार कॉल करने के बजाय प्रतिस्थापित लाइन ब्रेक के साथ मूल्य से जुड़ना है।

संकेत: संभवतः आप पहले ही नहीं, सभी लाइन ब्रेक को प्रतिस्थापित करना चाहते हैं। एक। वहाँ पर्याप्त जेएस प्रश्न हैं जो बताते हैं कि ऐसा कैसे करें, इसलिए मैंने परेशान नहीं किया।