聊聊Angular中如何創建簡單獨立組件並使用

本篇文章帶大家了解Angular中的獨立元件，介紹如何創建簡單的獨立元件以及如何在 Angular 應用程式中使用它們，希望對大家有所幫助！

如果你正在學習 Angular，那麼你可能已經聽說過獨立元件（Component）。顧名思義，獨立元件就是可以獨立使用和管理的元件，它們能夠被包含在其他元件中或被其他元件引用。

建立元件

要建立一個 Angular 元件，首先需要使用 Angular CLI 工具產生一個空的元件骨架。假設我們要建立一個名為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( ) 方法即可回應該事件。

在這篇文章中，我們深入了解了Angular獨立元件的概念以及如何建立和使用它們。我們首先介紹了什麼是獨立組件以及為何使用Angular獨立組件。

我們進一步探索了Angular CLI如何幫助我們輕鬆地創建新的獨立元件，並討論如何使用輸入，輸出和事件來使元件更加靈活和通用。

最後，我們強調了模組化程式方法在Angular獨立組件中的重要性。透過將應用程式拆分為小型，獨立的元件，我們可以更好地管理程式碼庫，並實現更可讀，可維護的程式碼。

借助章節中的程式碼範例，我們可以開始建立自己的獨立元件並為我們的應用程式增加更多的功能和複用性。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是聊聊Angular中如何創建簡單獨立組件並使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！