Parlons de la façon de créer et d'utiliser des composants indépendants simples dans Angular

Cet article vous amènera à comprendre les composants indépendants dans Angular, à vous présenter comment créer des composants indépendants simples et comment les utiliser dans les applications Angular. J'espère qu'il sera utile à tout le monde !

Si vous apprenez Angular, vous avez peut-être entendu parler de composants indépendants (Component). Comme leur nom l'indique, les composants indépendants sont des composants qui peuvent être utilisés et gérés indépendamment. Ils peuvent être inclus ou référencés par d'autres composants.

Créer un composant

Pour créer un composant angulaire, vous devez d'abord utiliser l'outil Angular CLI pour générer un squelette de composant vide. Supposons que nous voulions créer un composant nommé hello-world, nous pouvons exécuter la commande suivante : 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 文件来使用这个新的组件。只需要将 6c9b15d79ea5e3865f2f8d0efe5bb92e 标签添加到该文件的适当位置即可。

<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

Cette commande générera automatiquement un dossier hello-world, où contient tous les fichiers requis par le composant, tels que les classes de composants, les modèles HTML et les feuilles de style. [Tutoriels associés recommandés : "tutoriel angulaire

"]

Maintenant, nous pouvons éditer bonjour -world.component.ts fichier pour définir nos classes de composants. L'exemple de code suivant illustre une définition minimale de composant :

rrreee

Dans cette définition de composant, nous utilisons le décorateur @Component pour spécifier le sélecteur du composant, c'est-à-dire que le composant est Le nom de la balise dans le modèle. Dans le même temps, nous avons également déterminé le modèle HTML du composant, qui affiche simplement une balise de paragraphe « Hello World ! ».

Ensuite, nous pouvons modifier le fichier app.component.html pour utiliser ce nouveau composant. Ajoutez simplement la balise 6c9b15d79ea5e3865f2f8d0efe5bb92e à l'emplacement approprié dans le fichier.

rrreee

Ouvrez maintenant l'application et vous devriez pouvoir voir "Hello World!" apparaître sur la page.

Entrée de composant

Lors de l'utilisation d'un composant, nous devons généralement lui transmettre certaines données, ce qui peut être obtenu via l'attribut d'entrée du composant. 🎜🎜Pour définir une propriété d'entrée de composant, définissez une propriété avec le décorateur @Input() dans la classe du composant. Par exemple, disons que nous souhaitons définir le message du composant sur une valeur fournie par l'utilisateur : 🎜rrreee🎜Dans ce HelloWorldComponent modifié, nous avons ajouté un attribut d'entrée message, et utilisez-le dans des modèles pour afficher des messages. 🎜🎜Désormais, lors de l'utilisation de ce composant, nous pouvons lui transmettre des messages en tant que propriétés. Par exemple : 🎜rrreee

Sortie du composant🎜🎜Semblables aux propriétés d'entrée, les composants peuvent également communiquer avec d'autres composants via des événements de sortie. Pour définir un événement de sortie, utilisez le décorateur @Output() et la classe EventEmitter. 🎜🎜Par exemple, supposons que nous voulions créer un bouton dans un composant et déclencher un événement lorsque le bouton est cliqué. Nous pouvons le définir comme suit : 🎜rrreee🎜Dans ce composant, nous créons un attribut de sortie buttonClickcode>, et Cet événement est déclenché dans la méthode <code>onClick(). 🎜🎜Maintenant, lors de l'utilisation de ce composant, il suffit d'écouter son événement buttonClick : 🎜rrreee🎜Enfin, implémentez la méthode onButtonClick() dans le composant parent, qui il peut répondre à cet événement. 🎜🎜Dans cet article de blog, nous avons examiné en profondeur le concept des composants autonomes Angular et comment les créer et les utiliser. Nous avons d'abord présenté ce que sont les composants indépendants et pourquoi nous utilisons des composants indépendants angulaires. 🎜🎜Nous explorons plus en détail comment Angular CLI nous aide à créer facilement de nouveaux composants autonomes et discutons de la manière d'utiliser les entrées, les sorties et les événements pour rendre les composants plus flexibles et polyvalents. 🎜🎜Enfin, nous soulignons l'importance de l'approche de programmation modulaire dans les composants indépendants angulaires. En divisant l'application en petits composants indépendants, nous pouvons mieux gérer la base de code et obtenir un code plus lisible et maintenable. 🎜🎜Avec les exemples de code dans les chapitres, nous pouvons commencer à créer nos propres composants indépendants et ajouter plus de fonctionnalités et de réutilisabilité à nos applications. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!