HTML 属性未从 Typescript 传递到 html

Question

我从 Typescript 发送这个

this.equationList = "<span id=\"Weight2\" class=\"weight\">W</span> = mg";

到HTML

<div [innerHTML]="equationList"></div>

当我在检查器中查看元素时，我得到的只是

<span class="weight">W</span> = mg

id="Weight2" 没有通过。我试过在跨度中发送其他属性。只有class="weight"通过了。

Answer 1

你试过亲子关系吗？您可以使用@Outputs 将数据从子级传递到父级，也可以使用@Inputs 将数据从父级传递到子级。

Answer 2

创建如下管道：-

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: any, 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(`Invalid safe type specified: ${type}`);
        }
  }
}

像这样使用你的 innerHtml :-

<div [innerHTML]="equationList|safe: 'html'"></div>

HTML 属性未从 Typescript 传递到 html

HTML attribute not passing through to html from Typescript

string-interpolation

typescript

angular