如果我會一些Javascript的基礎知識，我可以快速地上手Angular嗎？或者說，我是一名前端工作者，沒有接觸過Angular，我該如何快速地使用Angular進行日常開發呢？我是輕流前端團隊的一員，用了一周的時間從之前沒有使用過Angular到了解Angular 可以進行一些簡單的開發，在這之中收獲良多，希望可以給同樣想了解和使用Angular的小伙伴帶來一些參考。

1. 組件是什么？

組件(Component)，就是可以實現我們需求的一個小塊。一個自定義的按鈕、一個表單、一個頁面等等，都是組件。組件是Angular項目的核心概念，我們頁面的一切都是由一個一個的組件搭建起來的。組件化的目的有兩個：一是解耦，把邏輯封裝在內部，每一個組件都是功能相對單一和獨立的個體；二是復用，封裝成組件之后不僅可以在項目內部復用，甚至可以沉淀下來跨項目復用。

// 以一個簡單的button為例

上面就是一個很簡單的組件，一個文字為紅色的'click me'的按鈕,在頁面中使用也很簡單:

<

上面的代碼中，我們注意到，從@angular/core中導入了 Component，并且使用@Component() 這個修飾器說明了我們的 DemoButtonComponent 是一個組件。@Component() 中我們傳入了幾個配置項 selector、template、styles，我們分別講一下它們是什么意思：

selector：顧名思義，它是一個選擇器(與css選擇器用法一樣)，選擇什么呢？選擇什么樣的標簽會觸發我們DemoButtonComponent這個類的構造。

template：即我們這個組件的模板，除了使用template這個屬性，我們還可以使用templateUrl這個可選屬性，可以導入一個html文件作為模板。

styles：組件內部樣式。這是一個數組，除了項demo中使用，也可以導入樣式文件。

@Component({selector: 'demo-button',templateUrl: './demo-button.html'styles: [`demo-btn: { color: red }`,'./demo-button.scss' ] })

那么，我們如何在組件中做更多的事情呢？我們再看Angular的生命周期鉤子。

2. Angular生命周期鉤子

Angular生命周期鉤子?angular.cn

Angular組件的生命周期中，暴露八個回調函數在不同的階段給開發者使用(類似于window對象的onload、ready)，分別為：

在代碼中使用鉤子：

@Import { Component，OnInit, OnDestroy } from ‘@angular/core’； @Component({selector: 'demo-button',template: `<button class="demo-btn">{{btnText}}</button>`,styles: [`.demo-btn {color: red;}`] }) export class DemoButtonComponent implements OnInit, OnDestroy {btnText: string;ngOnInit(): void {this.btnText = 'click me';}ngOnDestroy(): void {//do something} }

這樣，我們就可以通過Angular暴露給我們的這些生命周期鉤子，在組件生命周期的不同階段去做不同的事情，比如組件的初始化、事件監聽的銷毀等等。

3. 組件通信

因為Angular項目中，頁面是由一個一個的組件搭建而成，整個架構是縱向分層的。我們可以把一個頁面想像成一個組件樹，小組件構成更大一些、功能更豐富的組件，大一些的組件構成了頁面的一些功能塊，最終的頁面是由組件一級一級地構建而成。所以，數據的傳輸、組件之間的通信是我們必須要解決的一個問題，那么這個問題Angular是如何解決的呢？Angular給我們提供了兩種方式。

3.1 Input和Output(輸入輸出)

我們先來寫兩個簡單的父子組件：

@Import { Component, EventEmitter, Input, Output } from ‘@angular/core’； @Component({selector: 'demo-input',template: `<input [(ngModel)]="value" type="{{inputType}}"><button (click)="ok()">ok<button>` }) export class DemoInputComponent {@Input() inputType: string;@Output() onOk: EventEmitter<string> = new EventEmitter();value: string;ok(): void {this.onOk.emit(this.value);} }@Import { Component } from ‘@angular/core’； @Component({selector: 'demo-form',template: `userName: <demo-input [inputType]="'text'" (onOk)="name = $event"></demo-input>passWord: <demo-input [inputType]="'password'" (onOk)="pwd = $event"></demo-input>` }) export class DemoFormComponent {name: string;pwd: string; }

在這兩個組件中，我們在父組件的模板中 使用 '[inputType]' 向子組件中輸入了inputType屬性，并在子組件中使用 '@Input()' 接受了這個輸入的屬性。在子組件中，點擊按鈕時，使用'@Output()'事件發射器向外發射了'onOk'事件，然后在父組件中使用 '(onOk)' 接受到了這個發射出來的事件。

我們可以使用input和output在父子組件中方便快捷地進行通信。

3.2 Service

父子組件可以使用Input和Output方便地通信，非父子節點呢？如果使用Input和Output層層傳遞進行通信的化，代碼會非常的難看，有沒有什么別的方法可以更方便地進行組件通信呢？

當然有，那就是我們的service(服務)。同樣看一個例子：

@Import { Component, OnInit } from ‘@angular/core’； @Component({selector: 'demo-input',template: `<input [(ngModel)]="value" type="{{inputType}}"><button (click)="ok()">ok<button>` }) export class DemoInputComponent implements OnInit {inputType: string;value: string;constructor(public formSrv: FormService ) {}ok(): void {this.formSrv.onOk.emit(this.value);}ngOnInit(): void {this.inputType = this.formSrv.inputType;} }@Import { Component, OnInit } from ‘@angular/core’； @Import { FormService } from './form.service.ts'; @Component({selector: 'demo-form',template: `userName: <demo-input></demo-input>` }) export class DemoFormComponent implements OnInit {name: string;constructor(public formSrv: FormService ) {this.formSrv.onOk.subscribe(res => {this.name = res;});}ngOnInit(): void {this.formSrv.inputType = 'text';}}import { EventEmitter, Injectable } from '@angular/core';@Injectable({providedIn: 'root' })export class FormService {inputType: string;onOk: EventEmitter<string> = new EventEmitter(); }

在這個service中，我們把它的'providedIn'設置為‘root’，表示這個類在整個項目中是單例的，所以我們可以用它來存放一些組件公用的數據或者狀態。當然這個的寫法并不標準，在Angular中的Module和Compnent中都可以配置provider，即相對于每一個module或者component都會生成一個service實例。

結尾

作為三大前端框架之一，Angular的強大毋庸置疑，我們都是學習者和探索者(甚至是創造者)，還有很多東西我現在也沒有搞清楚，不過只要我們有心并且能付諸行動，必定天塹變通途。

總結

以上是生活随笔為你收集整理的angular input_快速地上手Angular组件开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。