Question

使用innerHTML属性添加材质设计元素会渲染结果。但是如果我们开发一个具有相同材料设计内容的html页面而不使用innerHTML属性会产生不同的结果。

这是示例

html文件直接插入的素材设计内容：

 <div id="requestForm">
   <button mat-raised-button color="primary" id="proceed_btn" style="margin-right: 15px;" (click)="reset()" *ngIf="request_form_selectedIndex > 2">Submit<i class="material-icons right material_icons_btn">send</i>
   </button>
 </div>

在浏览器的dom中，上面的页面呈现如下。 预期结果

<div id="requestForm">
<button _ngcontent-c3="" color="primary" id="proceed_btn" mat-raised-button="" style="margin-right: 15px;" class="mat-raised-button mat-primary ng-star-inserted" ng-reflect-color="primary">
  <span class="mat-button-wrapper">Submit
    <i _ngcontent-c3="" class="material-icons right material_icons_btn">send</i>
  </span>
  <div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
  <div class="mat-button-focus-overlay"></div>
</button>

但是当我尝试使用 innerHTML 属性插入材质元素时，它不会呈现相同的结果。

html文件：

<div id="requestForm">
</div>

ts档案：

htmlElement1 = "<button mat-raised-button color=\"primary\" id=\"proceed_btn\" style=\"margin: 95px 15px;\" (click) =\"reset()\" *ngIf=\"request_form_selectedIndex > 2\">Submit <i class=\"material-icons right material_icons_btn\">send</i> </button>"

document.getElementById("requestForm").innerHTML = htmlElement1;

在浏览器的dom中，上面的页面呈现以下结果。

但在添加材料时我想要上面提到的预期结果元素通过innerHTML属性。

我的结果

<div _ngcontent-c3="" id="requestForm">
  <button mat-raised-button="" color="primary" id="proceed_btn" style="margin: 95px 15px;" (click)="reset()" *ngif="request_form_selectedIndex > 2">Submit 
    <i class="material-icons right material_icons_btn">send</i> 
  </button>
</div>

我为了得到预期的结果而做了什么？

Answer 1

Angular清理DOM操作，以便不安全（可能是可以破解）的东西不起作用。标签很明显，但也不会像其他标签一样好用。你还没有说过尝试要实现的目标，所以除了显而易见之外，不可能做出一个好的推荐 - 从DOM插入DOM（就像你的第一个例子）。如果需要条件插入，请使用ngIf或ngSwitch。

如何在typescript中使用innerHTML渲染materail元素？

1 个答案: