如何阻止Angular 12用 替换空格字符?这会导致换行问题，因为 显然是不换行的空格字符。
例如，当我渲染我的组件的字符串"This is an example string."已被替换为"This is an example string."
这是我的组件application . card.component.ts:
import { Component, Input, OnInit } from '@angular/core';
import { Application } from 'src/app/services/apps.service';
@Component({
selector: 'app-application-card',
templateUrl: './application-card.component.html',
styleUrls: ['./application-card.component.css']
})
export class ApplicationCardComponent implements OnInit {
@Input() application: Application;
constructor() { }
ngOnInit(): void {
// this outputs "This is an example string." as expected
console.log(this.application.description);
}
}
application对象通过以下方式传递给组件:
<app-application-card *ngFor="let application of getApplicationsFiltered()" [application]="application"></app-application-card>
application-card.component.html:
<div class="app-card-body">
{{application.description}}
</div>
^这是我希望看到"<div class="app-card-body">This is an example string.</div>"的地方，但却得到了"<div class="app-card-body">This is an example string.</div>">
应用定义:
export interface Application {
id: string;
name: string;
description: string;
image: string;
suggested: boolean;
active: boolean;
url: string;
helpdesk_url: string;
}
我不知道如何阻止这种行为。我想{{application.description}}发出"This is an example string."而不插入 控制字符。如果您能帮助我们了解如何停止这种行为，我将不胜感激。
创建管道:replace-spaces.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'replacespaces' })
export class ReplaceSpacesPipe implements PipeTransform {
transform(value: string): string {
return value.replace(/ /g, ' ');
}
}
在声明ApplicationCardComponent的模块中声明ReplaceSpacesPipe
declarations: [ApplicationCardComponent, ReplaceSpacesPipe]
在模板中:
<div class="app-card-body">
{{application.description | replacespaces}}
</div>