Question

这里有一个奇怪的问题，我花了一些时间试图解决无济于事。

我有一个String类型的数组，其中包含一些数据（其中一些数据需要在Modal窗口中正确格式化。

此数组中字符串的示例为：

"Some sentence which will be followed by a list. <br/> - List Item 1 <br/> - List Item 2 <br/> - List Item 3",

这是我用来将此数据从TypeScript类传递到html的代码：

home.ts

const myPressedData = {
      title: titleListFinance[tileNum],
      longDesc: longDescListFinance[tileNum]
    };

    const myModalOptions: ModalOptions = {
      enableBackdropDismiss: true,
      cssClass: "my-modal"
    }

    const myModal = this.modal.create('ModalPage', { data: myPressedData }, myModalOptions);

    myModal.present();

modal.ts

ionViewWillLoad() {
    let dataIn = this.navParams.get('data');
    this.theTitle = dataIn.title;
    this.theLongDesc = dataIn.longDesc;
  }

modal.html

<ion-header >

  <ion-navbar>
    <ion-title align="center">{{theTitle}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-footer>
  <ion-buttons width="100%" >
        <button full ion-button (click)="closeModal()">Close </button>
  </ion-buttons>
</ion-footer>

<ion-content padding class="description">

  <p>
    {{theLongDesc}}
  </p>

</ion-content>

最终结果如下，没有换行符。我还尝试了
\ n \ n和我知道的所有其他形式的换行符。任何帮助将不胜感激，朋友！

干杯！

Answer 1

您需要安全的管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(protected _sanitizer: DomSanitizer) {
  }
  public transform(value: string, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Unable to bypass security for invalid type: ${type}`);
    }
  }
}

并使用

<p [innerHTML]="theLongDesc | safe:'html'"></p>

换行符在传递数据时迷路了？

1 个答案: