Lassen Sie uns darüber sprechen, wie Sie einfache unabhängige Komponenten in Angular erstellen und verwenden

In diesem Artikel erfahren Sie mehr über die unabhängigen Komponenten in Angular, erfahren, wie Sie einfache unabhängige Komponenten erstellen und wie Sie sie in Angular-Anwendungen verwenden. Ich hoffe, dass er für alle hilfreich ist!

Wenn Sie Angular lernen, haben Sie vielleicht schon von unabhängigen Komponenten (Component) gehört. Wie der Name schon sagt, handelt es sich bei unabhängigen Komponenten um Komponenten, die unabhängig voneinander verwendet und verwaltet werden können. Sie können in andere Komponenten eingebunden oder von diesen referenziert werden.

Erstellen Sie eine Komponente

Um eine Angular-Komponente zu erstellen, müssen Sie zunächst das Angular-CLI-Tool verwenden, um ein leeres Komponentenskelett zu generieren. Angenommen, wir möchten eine Komponente mit dem Namenhello-worlderstellen, können wir den folgenden Befehl ausführen:hello-world的组件，我们可以运行以下命令：

ng generate component hello-world

这个命令将会自动生成一个hello-world文件夹，其中包含了组件所需的所有文件，比如 Component 类、HTML 模板以及样式表。【相关教程推荐：《angular教程》】

现在我们可以编辑hello-world.component.ts文件来定义我们的组件类。下面这段代码示例演示了一个最小化的组件定义：

import { Component } from '@angular/core'; @Component({ selector: 'app-hello-world', template: '
Hello World!
', }) export class HelloWorldComponent { }

在这个组件定义中，我们使用@Component装饰器指定了组件的选择器（selector），也就是组件在模板中的标签名。同时，我们还确定了组件的 HTML 模板，它只是显示了一个 “Hello World!” 的段落标签。

接下来，我们可以修改app.component.html文件来使用这个新的组件。只需要将标签添加到该文件的适当位置即可。

现在打开应用程序，你应该能够看到 "Hello World!" 出现在页面上。

组件输入

当使用组件时，我们通常需要传递一些数据给它，这些数据可以通过组件的输入属性来实现。

要定义一个组件输入属性，请在组件类中定义一个带有@Input()装饰器的属性。例如，假设我们要将组件的消息设置为用户提供的值：

import { Component, Input } from '@angular/core'; @Component({ selector: 'app-hello-world', template: '
{{message}}
', }) export class HelloWorldComponent { @Input() message: string; }

在这个修改后的HelloWorldComponent中，我们添加了一个message输入属性，并在模板中使用它来显示消息。

现在，在使用此组件时，我们可以将消息作为属性传递给它。例如：

组件输出

与输入属性相似，组件也可以通过输出事件来与其它组件进行通信。要定义一个输出事件，请使用@Output()装饰器以及EventEmitter类。

例如，假设我们要在组件中创建一个按钮，点击按钮时触发一个事件，我们可以定义如下：

import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-button-with-click-event', template: 'Click me', }) export class ButtonWithClickEventComponent { @Output() buttonClick = new EventEmitter(); onClick(): void { this.buttonClick.emit(); } }

在这个组件中，我们创建了一个输出属性buttonClick，并在onClick()方法中触发了该事件。

现在，在使用此组件时，我们只需要监听它的buttonClick事件即可：

最后，在父组件中实现onButtonClick()rrreee

Öffnen Sie nun die App und Sie sollten „Hello World!“ auf der Seite sehen können.

Komponenteneingabe

KomponentenausgabeÄhnlich wie Eingabeeigenschaften können Komponenten auch über Ausgabeereignisse mit anderen Komponenten kommunizieren. Um ein Ausgabeereignis zu definieren, verwenden Sie den Dekorator@Output()und die KlasseEventEmitter. Angenommen, wir möchten eine Schaltfläche in einer Komponente erstellen und ein Ereignis auslösen, wenn auf die Schaltfläche geklickt wird. Wir können es wie folgt definieren: rrreeeIn dieser Komponente erstellen wir ein AusgabeattributbuttonClickcode> und dieses Ereignis wird in der Methode onClick()ausgelöst. Wenn wir diese Komponente verwenden, müssen wir nur noch auf ihrbuttonClick-Ereignis hören: rrreeeAbschließend implementieren wir die MethodeonButtonClick()in der übergeordneten Komponente Es kann auf dieses Ereignis reagieren. In diesem Blogbeitrag haben wir uns eingehend mit dem Konzept der eigenständigen Angular-Komponenten und deren Erstellung und Verwendung befasst. Wir haben zunächst vorgestellt, was unabhängige Komponenten sind und warum wir unabhängige Angular-Komponenten verwenden. Wir untersuchen weiter, wie Angular CLI uns dabei hilft, auf einfache Weise neue eigenständige Komponenten zu erstellen, und besprechen, wie wir Eingaben, Ausgaben und Ereignisse nutzen können, um Komponenten flexibler und vielseitiger zu machen. Abschließend betonen wir die Bedeutung des modularen Programmieransatzes in unabhängigen Angular-Komponenten. Durch die Aufteilung der Anwendung in kleine, unabhängige Komponenten können wir die Codebasis besser verwalten und einen besser lesbaren und wartbaren Code erzielen. Mit den Codebeispielen in den Kapiteln können wir mit dem Aufbau unserer eigenen unabhängigen Komponenten beginnen und unseren Anwendungen mehr Funktionalität und Wiederverwendbarkeit hinzufügen. Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !