溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下angular中的@Component裝飾器怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
@Component 裝飾器1.1 @Component 裝飾器的用途
聲明一個組件時，在組件類的之上要用@Component裝飾器來告知Angular這是一個組件。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product-alerts',
templateUrl: './product-alerts.component.html',
styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}1.2 @Component 裝飾器的常用選項
@Component 裝飾器繼承于 Directive ，這個css選擇器用于在模板中標記出該指令，并觸發該指令的實例化。
1.2.1 繼承自@Directive裝飾器的選項
| 選項 | 類型 | 說明 |
|---|---|---|
| selector | string | css選擇器名，用于在模板中標記出該指令（組件），并觸發其實例化 |
| inputs | string[] | Angular 會在變更檢測期間自動更新輸入屬性。inputs 屬性定義了一組從 directiveProperty 指向 bindingProperty 的配置項： · directiveProperty 用于指定要寫入值的指令內屬性。 · bindingProperty 用于指定要從中讀取值的 DOM 屬性。當沒有提供 bindingProperty 時，就假設它和 directiveProperty 一樣。 |
| outputs | string[] | 一組可供事件綁定的輸出屬性。當輸出屬性發出事件時，就會調用模板中一個附加到該事件的處理器。每個輸出屬性都會把 directiveProperty 映射到 bindingProperty： · directiveProperty 指定要發出事件的組件屬性。 · bindingProperty 指定要附加事件處理器的 HTML 屬性。 |
| provides | Provider[] | 服務提供商的集合 |
| exportAs | string | 一個或多個名字，可以用來在模板中把該指令賦值給一個變量。當有多個名字時，請使用逗號分隔它們。 |
| queries | {[key:string]:any} | 配置將要注入到該指令中的一些查詢。內容查詢會在調用 ngAfterContentInit 回調之前設置好。 試圖查詢會在調用 ngAfterViewInit 回調之前設置好。 |
| jit | true | 如果為 true，則該指令/組件將會被 AOT 編譯器忽略，因此永遠只會被 JIT 編譯。這個選項是為了支持未來的 Ivy 編譯器，目前還沒有效果。 |
| host | {[key:string]:string} | 使用一組鍵-值對，把類的屬性映射到宿主元素的綁定（Property、Attribute 和事件）。Angular 在變更檢測期間會自動檢查宿主 Property 綁定。 如果綁定的值發生了變化，Angular 就會更新該指令的宿主元素。當 key 是宿主元素的 Property 時，這個 Property 值就會傳播到指定的 DOM 屬性。當 key 是 DOM 中的靜態 Attribute 時，這個 Attribute 值就會傳播到宿主元素上指定的 Property 去。對于事件處理： · 它的 key 就是該指令想要監聽的 DOM 事件。 要想監聽全局事件，請把要監聽的目標添加到事件名的前面。 這個目標可以是 window、document 或 body。 · 它的 value 就是當該事件發生時要執行的語句。如果該語句返回 false，那么就會調用這個 DOM 事件的 preventDefault 函數。 這個語句中可以引用局部變量 $event 來獲取事件數據。 |
1.2.2 @Component自己特有的選項
| 選項 | 類型 | 說明 |
|---|---|---|
| changeDetection | ChangeDetectionStrategy | 當組件實例化之后，Angular 就會創建一個變更檢測器，它負責傳播組件各個綁定值的變化。 該策略是下列值之一： · ChangeDetectionStrategy#OnPush(0) 把策略設置為 CheckOnce（按需）。 · ChangeDetectionStrategy#Default(1) 把策略設置為 CheckAlways。 |
| viewProviders | Provider[] | 定義一組可注入對象，它們在視圖的各個子節點中可用 |
| moduleId | string | 包含該組件的那個模塊的 ID。該組件必須能解析模板和樣式表中使用的相對 URL。 SystemJS 在每個模塊中都導出了 __moduleName 變量。在 CommonJS 中，它可以設置為module.id。 |
| templateUrl | string | 組件模板文件的 URL。如果提供了它，就不要再用 template 來提供內聯模板了。 |
| template | string | 組件的內聯模板。如果提供了它，就不要再用 templateUrl 提供模板了。 |
| styleUrls | string[] | 一個或多個 URL，指向包含本組件 CSS 樣式表的文件。 |
| styles | string[] | 本組件用到的一個或多個內聯 CSS 樣式。 |
| animations | any[] | 一個或多個動畫 trigger() 調用，包含一些 state() 和 transition() 定義。 |
| encapsulation | ViewEncapsulation | 供模板和 CSS 樣式使用的樣式封裝策略。取值為： · ViewEncapsulation.ShadowDom：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平臺上才能工作。 · ViewEncapsulation.Emulated：使用墊片（shimmed) CSS 來模擬原生行為。 · ViewEncapsulation.None：使用全局 CSS，不做任何封裝。 如果沒有提供，該值就會從 CompilerOptions 中獲取它。默認的編譯器選項是 ViewEncapsulation.Emulated。如果該策略設置為 ViewEncapsulation.Emulated，并且該組件沒有指定 styles 或 styleUrls，就會自動切換到 ViewEncapsulation.None。 |
| interpolation | [string, string] | 改寫默認的插值表達式起止分界符（{{ 和 }}） |
| entryComponents | Array<Type | any[]> |
| preserveWhitespaces | boolean | 為 true 則保留，為 false 則從編譯后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正則表達式中匹配 \s 的字符。默認為 false，除非通過編譯器選項改寫了它。 |
selector 選擇器可使用下列形式之一：
element-name： 根據元素名選取
[attribute]： 根據屬性名選取
.class： 根據類名選取
[attribute=value]： 根據屬性名和屬性值選取
not(sub_selector)： 只有當元素不匹配子選擇器 sub_selector 的時候才選取
selector1, selector2： 無論 selector1 還是 selector2 匹配時都選取
2.1 element-name： 根據元素名選取
@Component({
selector: 'app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})<app-element></app-element>
2.2 [attribute]： 根據屬性名選取
@Component({
selector: '[app-element]',
template: './element.component.html',
styleUrls: ['./element.component.css']
})<div app-element></div>
2.3 .class： 根據類名選取
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})<div class="app-element"></div>
host: {[key:string]:string}使用一組鍵-值對，把類的屬性映射到宿主元素的綁定（Property、Attribute 和事件）。
Angular 在變更檢測期間會自動檢查宿主 Property 綁定。 如果綁定的值發生了變化，Angular 就會更新該指令的宿主元素。
當 key 是宿主元素的 Property 時，這個 Property 值就會傳播到指定的 DOM 屬性。
當 key 是 DOM 中的靜態 Attribute 時，這個 Attribute 值就會傳播到宿主元素上指定的 Property 去。
注意屬性的值默認為變量，如果直接使用屬性值，需要加字符串單引號或者雙引號，變量直接在組件里定義即可
對于事件處理：
它的 key 就是該指令想要監聽的 DOM 事件。 要想監聽全局事件，請把要監聽的目標添加到事件名的前面。 這個目標可以是 window、document 或 body。
它的 value 就是當該事件發生時要執行的語句。如果該語句返回 false，那么就會調用這個 DOM 事件的 preventDefault 函數。 這個語句中可以引用局部變量 $event 來獲取事件數據。
3.1 attribute 和 property
property：dom元素作為對象附加的內容，例如childNodes、firstChild等
attribute：HTML標簽特性是dom節點自帶的屬性
異同：
部分屬性既屬于 property ，又屬于 attribute ，比如 id
attribute 初始化后不會再改變； property 默認值為初始值，會隨著 dom 更新
所以在 angular2 中雙向綁定實現是由 dom 的 property 實現的，所以指令綁定的是 property ，但是在某些情況下 dom 不存在某個 property 比如 colspan，rowspan 等，這時想要綁定 html 標簽特性需要用到 attr:
<table width="100%" border="10px solid"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td [attr.colspan]=colnum>January</td> </tr> <tr> <td [attr.colspan]=colnum>February</td> </tr> </table> let colnum:number = 2;
3.2 使用 host 綁定 class
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css'],
host: {
'[class.default-class]': 'useDefault'
},
encapsulation: ViewEncapsulation.None // 讓宿主元素也用上 element.component.css 樣式。否則，默認膠囊封裝避免CSS污染。
})
export class AppElementComponent {
@Input() useDefault = true;
}<div class="app-element"></div>
3.3 使用 host 綁定 style
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css'],
host: {
'[style.background]': 'inputBackground'
}
})
export class AppElementComponent {
@Input() inputBackground = 'red';
}<div class="app-element"></div>
3.4 使用 host 綁定事件
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css'],
host: {
'(click)': 'onClick($event)'
}
})
export class AppElementComponent {
public onClick($event) {
console.log($event);
}
}<div class="app-element"></div>
encapsulation（封裝）供模板和 CSS 樣式使用的樣式封裝策略。
4.1 Web Components
通過一種標準化的非侵入的方式封裝一個組件，每個組件能組織好它自身的 HTML 結構、CSS 樣式、JavaScript 代碼，并且不會干擾頁面上的其他元素。
Web Components 由以下四種技術組成：
Custom Elements: 自定義元素HTML
Templates: HTML模板
Shadow DOM: 影子DOMHTML
Imports: HTML導入
4.2 Shadow DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
<style type="text/css">
.shadowroot_son {
color: #f00;
}
</style>
</head>
<body>
<p>我不在 Shadow Host內</p>
<div>Hello, world!</div>
<script>
// 影子宿主（shadow host）
var shadowHost = document.querySelector('.shadowhost');
// 創建影子根（shadow root）
var shadowRoot = shadowHost.createShadowRoot();
// 影子根作為影子樹的第一個節點，其他的節點比如p節點都是它的子節點。
shadowRoot.innerHTML = '<p>我在 Shadow Host內</p>';
</script>
</body>
<html>4.3 ViewEncapsulation
ViewEncapsulation 允許設置三個可選的值：
ViewEncapsulation.Emulated: 無 Shadow DOM，但是通過 Angular 提供的樣式包裝機制來封裝組件，使得組件的樣式不受外部影響。這是 Angular 的默認設置。
ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
ViewEncapsulation.None: 無 Shadow DOM，并且也無樣式包裝
4.3.1 ViewEncapsulation.None
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h5>Welcome to Angular World</h5>
<p class="greet">Hello {{name}}</p>
`,
styles: [`
.greet {
background: #369;
color: white;
}
`],
encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom
})
export class AppComponent {
name: string = 'Semlinker';
}ViewEncapsulation.None 設置的結果是沒有 Shadow DOM，并且所有的樣式都應用到整個 document，換句話說，組件的樣式會受外界影響，可能被覆蓋掉。
4.3.2 ViewEncapsulation.Emulated
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
...,
encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom
})
export class AppComponent {
name: string = 'Semlinker';
}ViewEncapsulation.Emulated 設置的結果是沒有 Shadow DOM，但是通過 Angular 提供的樣式包裝機制來封裝組件，使得組件的樣式不受外部影響。雖然樣式仍然是應用到整個 document，但 Angular 為 .greet 類創建了一個 [_ngcontent-cmy-0] 選擇器。可以看出，我們為組件定義的樣式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用來實現局部的樣式。
4.3.3 ViewEncapsulation.ShadowDom
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
...,
encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom
})
export class AppComponent {
name: string = 'Semlinker';
}ViewEncapsulation.ShadowDom 設置的結果是使用原生的 Shadow DOM 特性。Angular 會把組件按照瀏覽器支持的 Shadow DOM 形式渲染。
以上就是“angular中的@Component裝飾器怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
