Angular Material Icon使用詳解

1. 引入圖標(biāo)資源

在項(xiàng)目index.html文件里添加icon的圖標(biāo)庫文件的引用。

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

2. 導(dǎo)入MatIconModule

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

3. icons 資源

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

4. 自定義svg圖標(biāo)資源

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

注冊(cè)圖標(biāo)資源
注冊(cè)圖標(biāo)資源需要用到：

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

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

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 ：一個(gè)標(biāo)記性接口，用于表示一個(gè)值可以安全的用在特定的上下文中。

SafeValue 子接口：

• SafeHtml
• SafeResourceUrl
• SafeScript
• SafeStyle
• SafeUrl

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

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

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

這2個(gè)類需要DI進(jìn)組件。

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支持，因?yàn)镈omSanitizer 涉及url解析，因此需要導(dǎo)入httpClientModule。

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。