Eine kurze Diskussion über die Grundkenntnisse von Komponenten (@Component) in Angular

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

1. Übersicht

Komponenten sind die Hauptbausteine ​​von Angular-Anwendungen. Jede Komponente enthält die folgenden Teile:

• Eine HTML-Vorlage zum Deklarieren des auf der Seite darzustellenden Inhalts
• Eine Typescript-Klasse zum Definieren des Verhaltens
• Ein CSS-Selektor zum Definieren, wie die Komponente in der Vorlage verwendet wird
• ( Optional) CSS-Stil, der auf die Vorlage angewendet werden soll

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.

2. Komponente erstellen

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 f3fc15c0228dc320ab4107d8220f2b42

z. B. ng generic Component MyComponent
AngularCLI generiert automatisch einen Ordner und 4 Dateien: ng generate component MyComponent
AngularCLI会自动生成一个文件夹和4个文件：

• 一个以该组件命名的文件夹（e.g my-component)
• 一个组件文件 618b9d141ce13a9de5ed31e4de8e1aae.component.ts（e.g my-component.component.ts)
• 一个模板文件 618b9d141ce13a9de5ed31e4de8e1aae.component.html（e.g my-component.component.html)
• 一个 CSS 文件， 618b9d141ce13a9de5ed31e4de8e1aae.component.css（e.g my-component.component.css)
• 测试文件 618b9d141ce13a9de5ed31e4de8e1aae.component.spec.ts（e.g my-component.component.spec.ts)

对于Component，所有文件名都会自动增加Component后缀，所以不建议618b9d141ce13a9de5ed31e4de8e1aae 中带有‘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: '4a249f0d628e2318394fd9b75b4636b1Hello World!473f0a7621bec819994bb5020d29372a',
})

3. 视图封装模式

在 Angular 中，组件的 CSS 样式被封装进了自己的视图中，而不希望影响到应用程序的其它部分。这部分也是可以通过配置去进行控制的。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./my-component.component.css']
})

可以看到，增加了一个encapsulation

One benannt nach der Komponentenordner (z. B. meine Komponente)
1. Eine Komponentendatei 8dcc78ba78d8bf46711bd8e321816199.component.ts (z. B. meine-Komponente.komponente.ts)
2. Eine Vorlagendatei 8dcc78ba78d8bf46711bd8e321816199.component. html (z. B. my-component.component.html)
3. Eine CSS-Datei, 8dcc78ba78d8bf46711bd8e321816199.component.css (z. B. my-component.component.css)

Testdatei 8dcc78ba78d8bf46711bd8e321816199. 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 6d267e5fab17ea8bc578f9e7e5e1570b Wort.

:host {
}

Das Obige ist die Kern-TS-Datei, die den Selektor (CSS-Selektor), die Vorlagendatei (HTML) und die CSS-Datei angibt. HTML/CSS-Dateien können bei Bedarf von mehreren Komponenten gemeinsam genutzt werden. Insbesondere bei CSS können Sie sehen, dass der Parameter ein Array ist, sodass mehrere CSS formuliert werden können.

🎜🎜2.1. Komponentenvorlage🎜🎜🎜🎜Die Komponentenvorlage, also der HTML-Teil, kann eine HTML-Datei oder eine äquivalente HTML-Beschreibung sein. Angular-Komponenten erfordern eine Vorlage, die mit template oder templateUrl definiert ist. Sie können jedoch nicht beide Anweisungen gleichzeitig in einer Komponente haben. 1. HTML-Dateimethode 🎜 ohne Auswirkungen auf andere Teile der Anwendung. Dieser Teil kann auch über die Konfiguration gesteuert werden. 🎜

@Component({
  selector: 'app-my-component',
  template: &#39;<h1>Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

🎜Sie können sehen, dass ein 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: &#39;<h1>Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

4. 总结

• Angular CLI辅助创建一个component所需的多个文件
• 建议html/css/ts分开
• 在期望目录下执行Angular CLI命令，可以生成到制定目录
• 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!