詳解angular如何調用HTML字符串的方法

前面的文章我們介紹過angular6.0的數據綁定，也就是前面頁面如何調用后臺的數據，我們接觸到了調用普通數據——如：調用產品詳情{{post.content}}。在使用中，我們會發現，如果按原來的方式angular6.0調用的數據是HTML字符串，前臺頁面顯示的依然是html字符串，而沒有正常顯示，如下圖：

這顯示不是我們想要的結果。那么，angular6.0如何調用HTML字符串數據呢？

angular6.0提供了一個屬性綁定來實現html字符串數據的綁定：

這時，產品詳情頁的數據已正常顯示——圖片文字都能正常顯示出來。而這時，又出現一個問題，在頁面控制臺會有警告提示：WARNING: sanitizing HTML stripped some content? 如下圖：

頁面能正常輸出顯示，可見這個警告對頁面不影響。如果不介意，倒是可以忽略不計。但這對于我們開發者來說，畢竟不太如意，肯定是哪兒有問題呀。

這啥會出現這種情況？這是因為angular的保護措施，防止xss攻擊。其實可以不不管它，畢竟不是錯誤。如果不想看到這種警告信息，可以把產品詳情單獨出來進行解析：

第一步：引入DomSanitizer

第二步：通過DomSanitizer來解析產品詳情，并賦值給一個變量屬性 post_content；

第三步：前臺調用時，用innerHTML屬性綁定這個post_content變量

通過這幾部，問題解決。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

時間： 2018-06-29

問題:

在angularjs中,想在文本框中,驗證用戶輸入的字符串是否為日期時間. 剛開始時,Insus.NET想到的是正則,這只是驗證到日期與時間的格式是否正確而已,而對于2月最后一天或是30或是31號,還是無能為力. 因此,Insus.NET想使用angularjs的自定義指令來驗證解決此問題. 在ASP.NET MVC的項目中,創建一個控制器,并創建一個Action: 控制器源代碼: using System; using System.Collections.Generic; using Sys

本文實例講述了C#驗證用戶輸入信息是否包含危險字符串的方法.分享給大家供大家參考.具體分析如下: 這個C#函數可以用于表單輸入數據的后端驗證,判斷用戶是否提交了一些sql相關的危險注入字符 /// /// 檢測客戶輸入的字符串是否有效,并將原始字符串修改為有效字符串或空字符串 /// 當檢測到客戶的輸入中有攻擊性危險字符串,則返回false,有效返回true. /// ///

經常需要對用戶輸入的數據在插入數據庫或者判斷之前做Trim處理,針對每個ViewModel的字段各自做處理是我們一般的想法.最近調查發現其實也可以一次性實現的. MVC4.6中實現方式 1,實現IModelBinder接口,創建自定義ModelBinder. public class TrimModelBinder : IModelBinder { public object BindModel(ControllerContext controllerContext, ModelBindingC

本文實例講述了Javascript與PHP驗證用戶輸入URL地址是否正確的方法,分享給大家供大家參考.具體方法如下: 1.javascript檢測URL地址有效性: 復制代碼 代碼如下:

今天這個例子是 用來驗證用戶輸入的參數的合法性的,程序并不復雜,如下所示: #!/bin/sh # validAlphaNum - Ensures that input consists only of alphabetical # and numeric characters. validAlphaNum() { # Validate arg: returns 0 if all upper+lower+digits, 1 otherwise # Remove all unacceptable

問題描述 很多同學跟我一樣,都是剛開始接觸java,可能從c語言突然轉為java語言,有些跟我一樣手足無措,那怎么獲取用戶輸入的字符串! 如下示列: import Java.util.Scanner;?//導入輸入類 ? public static void main(String[] args) { ?? ??//創建輸入對象 ??Scanner sc=new Scanner(System.in); ?? ??//獲取用戶輸入的字符串 ??String str=null; ??System.o

實例如下所示: function isDate(dateString){ if(dateString.trim()=="")return true; var r=dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if(r==null){ alert("請輸入格式正確的日期\n\r日期格式:yyyy-mm-dd\n\r例 如:2008-08-08\n\r"); return false; } var

本文實例講述了Java實現字符串解析為日期時間的方法.分享給大家供大家參考,具體如下: Java版本:1.8開始 import java.time.LocalDate; import java.time.LocalDateTime; /** * Created by Frank */ public class DateParse { public static void main(String[] args) { String armisticeDate = "1914-11-11";

后臺Java代碼[驗證碼生成] /** * 隨機生成6位隨機驗證碼 */ public static String createRandomVcode(){ //驗證碼 String vcode = ""; for (int i = 0; i < 6; i++) { vcode = vcode + (int)(Math.random() * 9); } return vcode; } 后臺Java代碼[使用驗證碼并將驗證碼保存到session里面] String authCode

我們可以根據onkeydown事件的event.keyCode即是ASCII Chart來判斷字符或數字等.相關鍵盤key對應的ASCII碼: ?參考下面JavaScript代碼: 復制代碼 代碼如下:

總結

以上是生活随笔為你收集整理的angular字符串转成html,详解angular如何调用HTML字符串的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。