Làm thế nào để thay thế chuỗi trong góc 2?

Question

Tôi đã sử dụng với nội suy dưới đây trong trang html.

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

và cũng sử dụng

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

Nhưng cả hai đang hiển thị văn bản như sau

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

Answer 1

Bạn có thể sử dụng một ống cho cùng:

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}`; 
    } 
} 

Các ống phải được đưa vào khai @NgModule của bạn được đưa vào ứng dụng. Để hiển thị HTML trong mẫu của bạn, bạn có thể sử dụng bindingHTML bên ngoài.

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

Answer 2

{{}} là dành cho chuỗi suy và kết quả sẽ luôn luôn được thêm vào như là String. Các ràng buộc không làm việc ở tất cả trong trường hợp này vì < và > chứa trong biểu thức, các {{}} không được hiểu như mong đợi.

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

với

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

nên làm những gì bạn muốn. Như đã đề cập bởi @hgoebl replaceLineBreak có thể được triển khai dưới dạng đường ống nếu bạn cần ở một số nơi.

Plunker example

Gợi ý: Đó là khuyến khích để ràng buộc với các phương pháp trực tiếp, bởi vì phương pháp này được gọi là tại mỗi chu kỳ phát hiện sự thay đổi. Một đường ống thuần túy (mặc định) chỉ được gọi khi giá trị đầu vào thay đổi. Do đó một đường ống có hiệu quả hơn.

Cách khác chỉ thực hiện thay thế một lần và liên kết với giá trị bằng ngắt dòng thay thế thay vì gọi số replaceLineBreak liên tục.

Gợi ý: Bạn có thể muốn thay thế tất cả các ngắt dòng, không chỉ lần đầu tiên. một. Có đủ câu hỏi JS để giải thích làm thế nào để làm điều đó, do đó tôi không bận tâm.