angular - template - can't bind to 'ngmodel' since it isn't a known property of 'input'




Angular HTML绑定 (12)

以下代码将帮助您

myval你可以用所需的html替换

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

我正在编写一个Angular应用程序,我想要显示一个HTML响应。

我怎么做? 如果我只使用绑定语法 {{myVal}} 它会编码所有HTML字符(当然)。

我需要以某种方式将 divinnerHTML 绑定到变量值。


只是为了得到一个完整的答案,如果您的html内容在组件变量中,您还可以使用:

<div [innerHTML]=componementVariableThatHasTheHtml></div>

Angular 2中, 您可以执行3种类型的绑定:

  • [property]="expression" - >任何html属性都可以链接到
    表达。 在这种情况下,如果表达式更改属性将更新,但这不起作用。
  • (event)="expression" - >当事件激活执行表达式时。
  • [(ngModel)]="property" - >将属性从js(或ts)绑定到html。 此属性的任何更新都会在任何地方都很明显。

表达式可以是值,属性或方法。 例如:'4','controller.var','getValue()'

here 例子


[email protected]上:

使用 {{interpolation}} ,Html-Binding将无效,请改为使用“Expression”:

无效

<p [innerHTML]="{{item.anleser}}"></p>

- >抛出错误(插值而不是预期的表达式)

正确

<p [innerHTML]="item.anleser"></p>

- >这是正确的方法。

您可以在表达式中添加其他元素,例如:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

暗示

使用 [innerHTML] 添加的HTML(或通过其他方式(如 element.appenChild() 或类似方法动态添加)将不会由Angular以任何方式处理,除非为了安全目的而进行清理。
只有将HTML静态添加到组件模板时,此类操作才有效。 如果需要,可以在运行时创建一个组件,如 我如何使用/创建动态模板以使用Angular 2.0编译动态组件中所述?


如果你想在Angular 2或Angular 4中使用它并且还想保留内联CSS,那么你可以使用

<div [innerHTML]="theHtmlString | keepHtml"></div>

如果它包含用户创建的内容,则不使用Angular的DOM清理程序直接使用[innerHTML]。 @GünterZöchbauer 在他的回答中 提出的safeHtml管道是一种消毒内容的方法。 以下指令是另一个指令:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

要使用的

<div [safeHtml]="myVal"></div>

如果我在这里忽略了这一点,我道歉,但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据并将其绑定到客户端的模板。 由于您只从服务器返回json,因此这会产生更灵活的请求。

对我来说,如果您正在做的就是从服务器获取html并将其“按原样”注入DOM中,那么使用Angular似乎没有意义。

我知道Angular 1.x有一个html绑定,但我还没有看到Angular 2.0中的对应物。 他们可能会在以后添加它。 无论如何,我仍然会考虑为你的Angular 2.0应用程序提供数据api。

如果您有兴趣,我在这里有一些示例带有一些简单的数据绑定: http://www.syntaxsuccess.com/viewarticle/angular-2.0-exampleshttp://www.syntaxsuccess.com/viewarticle/angular-2.0-examples


您可以使用多种方法来实现解决方案。 正如已批准的答案中所述,您可以使用:

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

根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):

介绍

<div id="test"></test>

零件

var p = document.getElementsById("test");
p.outerHTML = myVal;

财产约束

Javascript DOM外部HTML


我们总是可以将html内容传递给 innerHTML 属性来呈现html动态内容,但动态html内容也可能被感染或恶意。 因此,在将动态内容传递给 innerHTML 之前,我们应始终确保内容已清理(使用 DOMSanitizer ),以便我们可以转义所有恶意内容。

尝试以下管道:

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

正确的语法如下:

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

适用于 8.1.2

文档参考


[innerHtml] 在大多数情况下都是很好的选择,但它会因为非常大的字符串或者在html中需要硬编码样式而失败。

我想分享其他方法:

你需要做的就是在你的html文件中创建一个div并给它一些id:

<div #dataContainer></div>

然后,在Angular 2组件中,创建对此对象的引用(此处为TypeScript):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

然后只需使用 loadData 函数将一些文本追加到html元素。

这只是一种使用原生javascript的方式,但在Angular环境中。 我不推荐它,因为使代码更麻烦,但有时没有其他选择。

另请参见 .com/questions/36265026/…


Angular 2.0.0和Angular 4.0.0 final

仅为了安全的内容

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

DOMSanitizer

潜在的不安全HTML需要使用Angulars DOM清理程序明确标记为受信任,因此不会删除内容中可能不安全的部分

<div [innerHTML]="myVal | safeHtml"></div>

用管子

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

另请参见 在RC.1中,无法使用绑定语法添加某些样式

和文档: https://angular.io/api/platform-browser/DomSanitizerhttps://angular.io/api/platform-browser/DomSanitizer

安全警告

信任用户添加的HTML可能会带来安全风险。 前面 提到的文档 陈述:

调用任何 bypassSecurityTrust... API会禁用Angular对传入值的内置清理。仔细检查并审核进入此调用的所有值和代码路径。 确保为此安全上下文适当地转义任何用户数据。 有关详细信息,请参阅“ 安全指南”

角度标记

就像是

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

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

不会导致Angular在 foo 处理Angular特有的任何东西 。 Angular使用生成的代码替换构建时的Angular特定标记。 Angular不会处理 运行时添加的标记。

要添加包含特定于角度的标记(属性或值绑定,组件,指令,管道......)的HTML,需要在运行时添加动态模块和编译组件。 这个答案提供了更多细节 如何使用/创建动态模板来使用Angular 2.0编译动态组件?







angular2-databinding