在Angular 2中，你可以做3种类型的绑定:

[property]="expression" ->任何html属性都可以链接到 表达式。在这种情况下，如果表达式更改属性将更新， 但反过来就行不通了。 (event)="expression" ->当事件激活时执行表达式。 [(ngModel)]="property" ->将属性从js(或ts)绑定到html。在此属性上的任何更新都将随处可见。

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

例子

你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。

例如:<div [innerHTML]="theHtmlString"></div>

使用规范形式如下:

<div bind-innerHTML="theHtmlString"></div>

Angular文档:https://angular.io/guide/template-syntax#property-binding-property

参见工作stackblitz示例

如果你的angular(或任何框架)应用程序中有模板，并且你通过HTTP请求/响应从后端返回HTML模板，那么你就是在前端和后端混合模板。

为什么不只是离开模板的东西要么在前端(我会建议)，或在后端(相当不透明的imo)?

如果将模板放在前端，为什么不直接用JSON响应后端请求呢?您甚至不需要实现RESTful结构，但是将模板放在一边可以使代码更加透明。

当其他人不得不处理您的代码(甚至您自己在一段时间后重新输入自己的代码)时，这将会得到回报!

If you do it right, you will have small components with small templates, and best of all, if your code is imba, someone who doesn't know coding languages will be able to understand your templates and your logic! So additionally, keep your functions/methods as small you can. You will eventually find out that maintaining, refactoring, reviewing, and adding features will be much easier compared to large functions/methods/classes and mixing up templating and logic between the frontend and the backend - and keep as much of the logic in the backend if your frontend needs to be more flexible (e.g. writing an android frontend or switching to a different frontend framework).

哲学，伙计:)

附注:你不需要实现100%干净的代码，因为这是非常昂贵的——特别是如果你必须激励团队成员;) 但是:你应该在干净的代码和你已经拥有的代码之间找到一个很好的平衡(也许它已经很干净了)

如果可以的话，看看这本书，让它进入你的灵魂: https://de.wikipedia.org/wiki/Clean_Code

正确的语法如下:

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

文档参考

我已经建立下面的库，这将有助于重新绑定html格式的绑定。 请找到下面使用这个库的步骤。这个库基本上允许在AOT中注入JIT编译器代码

Install library using npm i angular-html-recompile Add below code in app.component.html file <pk-angular-html-recompile *ngIf="template !== ''" [stringTemplate]="template" [data]="dataObject"> </pk-angular-html-recompile> Use below code in app.component.ts file import { Component, OnInit, ViewChild } from '@angular/core'; import { AngularHtmlRecompileComponent, AngularHtmlRecompileService } from 'angular-html-recompile'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { @ViewChild(AngularHtmlRecompileComponent, { static: true }) comp !: AngularHtmlRecompileComponent; constructor( private angularHtmlRecompileService: AngularHtmlRecompileService) { } public dataObject: any; public template = `<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center"> <mat-card class="box"> <mat-card-header> <mat-card-title>Register</mat-card-title> </mat-card-header> <form class="example-form"> <mat-card-content> <mat-form-field class="example-full-width"> <input matInput placeholder="Username" [value]="Username" (keydown)="onControlEvent($event,'Username')"> </mat-form-field> <mat-form-field class="example-full-width"> <input matInput placeholder="Email" [value]="Email" (keydown)="onControlEvent($event,'Email')"> </mat-form-field> <mat-form-field *ngIf="isShow" class="example-full-width"> <input matInput placeholder="Password" [value]="Password" (keydown)="onControlEvent($event,'Password')"> </mat-form-field> <mat-form-field class="example-full-width"> <mat-label>Choose a role...</mat-label> <mat-select (selectionChange)="onControlEvent($event, 'selectedValue')"> <mat-option [value]="roles" *ngFor="let roles of Roles">{{roles}} </mat-option> </mat-select> </mat-form-field> </mat-card-content> <button mat-stroked-button color="accent" class="btn-block" (click)="buttomClickEvent('submit')" >Register</button> </form> </mat-card> </div>`; ngOnInit(): void { this.angularHtmlRecompileService.sharedData.subscribe((respose: any) => { if (respose) { switch (respose.key) { case `Username`: // Call any method on change of name break; case `Password`: //Update password from main component this.comp[`cmpRef`].instance['Password'] = "Karthik"; break; case `submit`: //Get reference of all parameters on submit click //1. respose.data OR //use this.comp[`cmpRef`].instance break; default: break; } } }); this.prepareData(); } prepareData() { //Prepare data in following format only for easy binding //Template preparation and data preparation can be done once data received from service // AngularHtmlRecompileComponent will not be rendered until you pass data this.dataObject = [ { key: 'Username', value: 'Pranay' }, { key: 'Email', value: 'abc@test.com', }, { key: 'Password', value: 'test123', }, { key: 'Roles', value: ['Admin', 'Author', 'Reader'] }, { key: 'isShow', value: this.updateView() } ]; } updateView() { //Write down logic before rendering to UI to work ngIf directive return true; } } Add module into app.module.ts file import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AngularHtmlRecompileModule } from "angular-html-recompile"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AngularHtmlRecompileModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } This library supports basic html, Angular material, flex layouts. To use this features install below dependencies npm i -s @angular/material @angular/flex-layout

在Angular v2.1.1中工作

<div [innerHTML]="variable or htmlString">
</div>