1. 引入圖標資源

在項目index.html文件里添加icon的圖標庫文件的引用。

 <link  rel="external nofollow" rel="stylesheet">

2. 導(dǎo)入MatIconModule

如果需要在別的組件同樣使用，則需要exports里面引出.

3. icons 資源

可以訪問material design獲取全部icon名稱及圖標樣式信息。

4. 自定義svg圖標資源

在網(wǎng)上下載svg資源，并將文件保存到項目assets目錄里。

注冊圖標資源
注冊圖標資源需要用到：

1. MatIconRegistry 以及 DomSanitizer 類。
2. MatIconRegistry(圖標資源是基于字體而不是圖片的)
   

使用MatIconRegistry的下面方法addSvgIcon,addSvgIconInNamespace, addSvgIconLiteral 或者addSvgIconLiteralInNamespace 注冊.

DomSanitizer 可以把值凈化為在不同 DOM 上下文中的安全內(nèi)容，來幫你防范跨站腳本攻擊（XSS）類的安全問題。

abstract class DomSanitizer implements Sanitizer {
 abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
 abstract bypassSecurityTrustHtml(value: string): SafeHtml
 abstract bypassSecurityTrustStyle(value: string): SafeStyle
 abstract bypassSecurityTrustScript(value: string): SafeScript
 abstract bypassSecurityTrustUrl(value: string): SafeUrl
 abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl
}

abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
SecurityContext：枚舉

enum SecurityContext {
 NONE: 0
 HTML: 1
 STYLE: 2
 SCRIPT: 3
 URL: 4
 RESOURCE_URL: 5
}

SafeValue ：一個標記性接口，用于表示一個值可以安全的用在特定的上下文中。

SafeValue 子接口：

• SafeHtml
• SafeResourceUrl
• SafeScript
• SafeStyle
• SafeUrl

如果這個值在這個上下文中是可信的，則該方法會解開所包含的安全值，并且直接使用它；否則，這個值就會根據(jù)給定的安全上下文凈化成安全的，比如替換那些具有不安全協(xié)議（例如 javascript:）的 URL。 該實現(xiàn)負責確保在給定的上下文中可以絕對安全的使用該值。

其余函數(shù)警告： 使用不可信的用戶數(shù)據(jù)調(diào)用此方法將會讓你的應(yīng)用暴露在 XSS 安全風險之下！

當使用 bypassSecurityTrust... 時，請盡量確保盡早調(diào)用該方法，并且讓他盡可能接近值的來源，以便能更容易地驗證使用它時有沒有引入安全風險。

這2個類需要DI進組件。

import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';

constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){
 iconRegistry.addSvgIcon('bell',domSanitizer.bypassSecurityTrustResourceUrl('assets/bell.svg'));
}

svg導(dǎo)入需要http支持，因為DomSanitizer 涉及url解析，因此需要導(dǎo)入httpClientModule。

import { HttpClientModule} from '@angular/common/http'

@NgModule({
  imports: [
   HttpClientModule,
  ]
})
export class AppModule { }

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論