Dieser Artikel führt Sie in die Grundkenntnisse der Komponenten (@Component) in Angular ein. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Umgebung:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm: 6.14.6
- IDE: Visual. Studio Code
Komponenten sind die Hauptbausteine von Angular-Anwendungen. Jede Komponente enthält die folgenden Teile:
Komponente kann eine Seite oder eine Komponente (Steuerelement) sein. Immer ist ein Seitenelement. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]
Jede Komponente ist Teil von NgModule, sodass sie von anderen Anwendungen und anderen Komponenten aufgerufen werden kann. Um eine Komponente als Mitglied von NgModule zu definieren, sollten Entwickler die von ihnen entwickelte Komponente im Deklarationsattribut von NgModule auflisten.
Darüber hinaus können Entwickler Metadaten über den Component-Modifikator (d. h. @Component) konfigurieren, sodass Components ihre laufende Umgebung über verschiedene Life-Cycle-Hooks steuern können.
Basierend auf AngularCLI kann eine Komponente einfach erstellt werden. Führen Sie in dem Verzeichnis, in dem Sie die Komponente erstellen möchten, den folgenden Befehl aus:
ng generate component <component-name>
z. B. ng generic Component MyComponent
AngularCLI generiert automatisch einen Ordner und 4 Dateien: 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 {
}
}以上是核心的ts文件，指定了selector(CSS 选择器)，template（html）文件，css文件。html/css文件如果需要可以多个component公用。尤其是css，可以看到参数是Array，所以可以制定多个css。
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>',
})在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./my-component.component.css']
})可以看到，增加了一个encapsulation
Testdatei < Komponentenname >. Component.spec.ts (z. B. my-component.component.spec.ts)Für Component wird allen Dateinamen automatisch das Component-Suffix hinzugefügt, daher wird nicht empfohlen, „component“ in < > Wort.
:host {
}@Component({
selector: 'app-my-component',
template: '<h1>Hello World!</h1>',
styles: ['h1 { font-weight: normal; }']
})encapsulation-Attribut (Kapselungsmodus anzeigen) hinzugefügt wurde. Sie können den Kapselungsmodus jeder Komponente einzeln steuern, indem Sie den Ansichtskapselungsmodus für die Metadaten der Komponente festlegen. Die optionalen Kapselungsmodi lauten wie folgt: 🎜🎜🎜Der emulierte Modus (Standardwert) simuliert das Verhalten von Shadow DOM durch Vorverarbeiten (und Umbenennen) von CSS-Code, um den Zweck zu erreichen, CSS-Stile auf Komponentenansichten zu beschränken. Weitere Informationen finden Sie in Anhang 1. (Hinweis: Nur eingehende, nicht ausgehende, globale Stile können eingehen, Komponentenstile können nicht ausgehen.) 🎜🎜Der ShadowDom-Modus verwendet die native Shadow-DOM-Implementierung des Browsers, um ein Shadow-DOM an das Hostelement der Komponente anzuhängen. Die Ansicht der Komponente ist an dieses Shadow-DOM angehängt und die Stile der Komponente sind ebenfalls in diesem Shadow-DOM enthalten. (Erklärung: Kein Ein- oder Ausgang, keine Stile können eingehen und Komponentenstile können nicht ausgehen.) 🎜🎜None bedeutet, dass Angular keine Ansichtskapselung verwendet. Angular fügt CSS zu globalen Stilen hinzu. Die zuvor besprochenen Scoping-, Isolations- und Schutzregeln gelten nicht. Im Wesentlichen ist dies dasselbe, als würden Sie die Stile der Komponente direkt in HTML einfügen. 🎜🎜🎜🎜🎜3.1. Spezieller Selektor :host🎜🎜🎜🎜Verwenden Sie den Pseudoklassenselektor :host, um Elemente im Komponenten-Hostelement auszuwählen (relativ zu Elementen innerhalb der Komponentenvorlage). Die Option :host ist die einzige Möglichkeit, ein Hostelement als Ziel festzulegen. Andernfalls können Sie ihn nicht angeben, da der Host nicht Teil der eigenen Vorlage der Komponente, sondern Teil der Vorlage der übergeordneten Komponente ist. 🎜🎜z.B.🎜: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
更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Grundkenntnisse von Komponenten (@Component) in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
Einführung in Laravel-Komponenten
iPhone 4-Jailbreak
Was ist die Mikrocontroller-Programmiersoftware?
Der Unterschied zwischen Konsolenkabel und Netzwerkkabel
So erstellen Sie Screenshots auf Huawei-Handys
Formelle Handelsplattform für digitale Währungen
iexplore.exe
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
