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 Namen hello-world erstellen, 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: &#39;<p>Hello World!</p>&#39;,
})
export class HelloWorldComponent {
}

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

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

<app-hello-world></app-hello-world>

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

组件输入

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

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

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>{{message}}</p>&#39;,
})
export class HelloWorldComponent {
    @Input() message: string;
}

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

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

<app-hello-world message="Welcome to my app!"></app-hello-world>

组件输出

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

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

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-button-with-click-event',
    template: &#39;<button (click)="onClick()">Click me</button>&#39;,
})
export class ButtonWithClickEventComponent {
    @Output() buttonClick = new EventEmitter<any>();

    onClick(): void {
        this.buttonClick.emit();
    }
}

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

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

<app-button-with-click-event (buttonClick)="onButtonClick()"></app-button-with-click-event>

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

Dieser Befehl generiert automatisch einen Ordner hello-world, in dem alle enthalten sind die von der Komponente benötigten Dateien, z. B. Komponentenklassen, HTML-Vorlagen und Stylesheets. [Empfohlene verwandte Tutorials: „Angular-Tutorial

"]

Jetzt können wir Hallo bearbeiten -world.component.ts Datei zum Definieren unserer Komponentenklassen. Das folgende Codebeispiel zeigt eine minimale Komponentendefinition:

rrreee

In dieser Komponentendefinition verwenden wir den Dekorator @Component, um den Selektor (Selektor) der Komponente anzugeben, d. h. die Komponente ist Der Tag-Name in die Vorlage. Gleichzeitig haben wir auch das HTML-Template der Komponente festgelegt, das lediglich einen „Hello World!“-Absatz-Tag anzeigt.

Als nächstes können wir die Datei app.component.html ändern, um diese neue Komponente zu verwenden. Fügen Sie einfach das Tag <app-hello-world> an der entsprechenden Stelle in der Datei hinzu.

rrreee

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

Komponenteneingabe

Wenn wir eine Komponente verwenden, müssen wir ihr normalerweise einige Daten übergeben, was über das Eingabeattribut der Komponente erreicht werden kann. 🎜🎜Um eine Komponenteneingabeeigenschaft zu definieren, definieren Sie eine Eigenschaft mit dem Dekorator @Input() in der Komponentenklasse. Nehmen wir zum Beispiel an, wir möchten die Nachricht der Komponente auf einen vom Benutzer bereitgestellten Wert festlegen: 🎜rrreee🎜In dieser modifizierten HelloWorldComponent haben wir ein message-Eingabeattribut hinzugefügt. und Verwenden Sie es in Vorlagen, um Nachrichten anzuzeigen. 🎜🎜Wenn wir diese Komponente verwenden, können wir ihr nun Nachrichten als Eigenschaften übergeben. Zum Beispiel: 🎜rrreee

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 Klasse EventEmitter. 🎜🎜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: 🎜rrreee🎜In dieser Komponente erstellen wir ein Ausgabeattribut buttonClickcode> und dieses Ereignis wird in der Methode <code>onClick() ausgelöst. 🎜🎜Wenn wir diese Komponente verwenden, müssen wir nur noch auf ihr buttonClick-Ereignis hören: 🎜rrreee🎜Abschließend implementieren wir die Methode onButtonClick() 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🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie einfache unabhängige Komponenten in Angular erstellen und verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!