本篇文章跟大家介紹一下Angular中元件（@Component）基本知識。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
環境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
angular教學》】
任何一個Component都是NgModule的一部分，這樣它就可以被其他應用和其他Component所呼叫。為了定義Component是NgModule的一個成員之一，開發者應該在NgModule的declarations屬性中，將自己開發的Component列出。 另外，透過Component修飾符（也就是@Component）開發者可以配置元數據，這樣透過各式各樣的Life-Cycle hooks，Components就可以控制他們的運作環境。ng generate component <component-name>
ng generate component MyComponent AngularCLI會自動產生一個資料夾和4個檔案：
對於Component，所有檔案名稱都會自動增加Component後綴，所以不建議< component-name > 中帶有'component'這個單字。
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}2.1. 元件模板
#元件模板，即HTML部分，可以是html文件，也可以是一段html描述，是等價的。 Angular 元件需要一個用 template 或 templateUrl 定義的模板。但你不能在元件中同時擁有這兩個語句。
1、html 檔案方式@Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
})
2、html程式碼方式
@Component({
selector: 'app-component-overview',
template: '<h1>Hello World!</h1>',
})@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./my-component.component.css']
})可以看到，增加了一個encapsulation屬性 （視圖封裝模式）。透過在元件的元資料上設定視圖封裝模式，你可以分別控制每個元件的封裝模式。可選的封裝模式一共有以下幾種：3.1. 特殊的選擇器:host
使用:host 偽類別選擇器，用來選擇元件宿主元素中的元素（相對於組件模板內部的元素）。 :host 選擇是把宿主元素當作目標的唯一方式。除此之外，你將沒辦法指定它， 因為宿主不是元件自身模板的一部分，而是父元件模板的一部分。 e.g.###:host {
}3.2. inline-styles
默认AngularCLI生成的component，css在一个单独文件中。当然，同html模板类似，如果需要，你也可以制定css样式写在ts中， 不单独放到一个文件中。命令：ng generate component MyComponent --inline-style。
生成component如下
@Component({
selector: 'app-my-component',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})ng generate component XXX 可以简写为 ng g c
更多编程相关知识，请访问：编程视频！！
以上是淺談Angular中組件（@Component）基本知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！
