了解 Angular 組件的基本指南-js教程-PHP中文網

A Basic Guide to Understanding Components in Angular

Angular 元件是 Angular 應用程式的基礎，提供了一種建構使用者介面的模組化、可重複使用部分的方法。在本指南中，我們將介紹 Angular 元件的基礎知識，從結構到最佳實踐。無論您是 Angular 新手還是想複習一下，本文都將使您對 Angular 中的元件有基本的了解。

什麼是角度分量？

在 Angular 中，元件是控制使用者介面 (UI) 部分的類別。想想按鈕、選項卡、輸入、表單和抽屜（實際上是 UI 的任何部分）。每個組件都是獨立的，包括：

HTML 範本：定義 UI 的佈局和結構。
CSS 樣式：設定組件的外觀和樣式。
TypeScript 類別：包含元件的邏輯和資料。
元資料：提供 Angular 識別和使用組件的配置詳細資訊。

元件對於建立模組化應用程式至關重要，因為每個元件都可以代表頁面的特定部分，例如標題、側邊欄或卡片。

角度組件的基本結構

Angular 元件是使用 @Component 裝飾器定義的，它使用必要的模板、樣式和選擇器對其進行配置。這是一個基本範例：

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';
 
  getTitle() {
    return this.title;
  }
}

登入後複製

在此範例中：

選擇器是代表元件的 HTML 標籤。
templateUrl 指向 HTML 範本文件。
styleUrls 指的是元件的 CSS 檔案。
ExampleComponent 類別保存元件的資料和邏輯。

典型的組件資料夾結構

Angular 專案通常將元件及其關聯文件組織在一個資料夾中，該資料夾是使用 Angular CLI 時自動建立的。組件的典型資料夾結構包括：

example.component.ts：定義 TypeScript 類別。
example.component.html：包含 HTML 範本。
example.component.css：儲存元件樣式。
example.component.spec.ts：包含元件的測試。

組件生命週期

Angular 組件具有帶有鉤子的生命週期，允許開發人員在各個階段執行操作。常用的生命週期鉤子包括：

ngOnInit：組件初始化後呼叫。
ngOnChanges：當任何資料綁定屬性變更時觸發。
ngOnDestroy：在 Angular 銷毀組件之前呼叫。

例如，ngOnInit 的使用方法如下：

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';
 
  getTitle() {
    return this.title;
  }
}

登入後複製

生命週期掛鉤提供了靈活性，可以輕鬆管理元件生命週期特定階段的邏輯。

組件之間的通信

在現實應用程式中，元件通常需要相互互動以共享資料或觸發操作。 Angular 提供了幾種元件通訊的方法：

1. @輸入與@輸出

@Input：允許父元件傳遞資料給子元件。
@Output：使子元件能夠向其父元件發送事件。

範例：

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-lifecycle',
  template: '<p>Lifecycle example</p>',
})
export class LifecycleComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized!');
  }
}

登入後複製

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`,
})
export class ChildComponent {
  @Input() childMessage: string;
  @Output() messageEvent = new EventEmitter<string>();
 
  sendMessage() {
    this.messageEvent.emit('Message from child!');
  }
}

登入後複製

2.基於服務的通訊

當元件不存在父子關係時，Angular 服務提供了一種共享資料和邏輯的簡單方法。預設情況下，服務是單例的，這表示應用程式中僅存在一個實例。

1 2	`<!-- parent.component.html -->` `<app-child [childMessage]="parentMessage"` `(messageEvent)="receiveMessage($event)"></app-child>`

登入後複製

在不同組件中使用服務：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new BehaviorSubject<string>('Default Message');
  currentMessage = this.messageSource.asObservable();
 
  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

登入後複製

// component-one.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';
 
@Component({
  selector: 'app-component-one',
  template: `<button (click)="changeMessage()">Change Message</button>`,
})
export class ComponentOne {
  constructor(private sharedService: SharedService) {}
 
  changeMessage() {
    this.sharedService.changeMessage('Hello from Component One');
  }
}