前端開發(fā)框架之Angular自定義組件學(xué)習(xí)分享

IT小白在線 2021-10-29

展開全文

創(chuàng)建組件

在components文件夾下創(chuàng)建一個數(shù)據(jù)庫下載的公用組件。

打開命令行(使用vscode編輯器的小伙可以直接使用Ctrl+` 快捷鍵打開終端,然后一路跳轉(zhuǎn)到components文件夾：

cd src\app\components

在此目錄下執(zhí)行指令：

ng g c es-download

上面指令的意思是創(chuàng)建一個名為es-download的組件，

使用上面的指令創(chuàng)建的組件是會前端培訓(xùn)被自動引用到components這個模塊中的。
components.module.ts

import { EsDownloadComponent } from './es-download/es-download.component';  //引入組件@NgModule({  declarations: [..., EsDownloadComponent],//聲明組件})

上面是在使用ng g c es-download指令時自動完成的

但若是想在其它的模塊中使用這個es-download組件，還得將其導(dǎo)出。

導(dǎo)出的方式是將這個組件添加至components.module.ts文件的exports中：

@NgModule({  declarations: [..., EsDownloadComponent],  imports: [...],  exports: [..., EsDownloadComponent],
})export class ComponentsModule { }

組件的基礎(chǔ)概念

查看es-download.component.ts

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-es-download',  templateUrl: './es-download.component.html',  styleUrls: ['./es-download.component.css']
})export class EsDownloadComponent implements OnInit {  constructor() { }  ngOnInit(): void {
  }
}

可以看到此處從@angular/core中引入Component裝飾器；并且建立了一個類，用@Component修飾它；在@Component中，設(shè)置了selector自定義標簽和template模板。組件的幾個關(guān)鍵知識點如下：

組件與模塊

模塊是在組件之上的一層抽象，組件以及指令、管道、服務(wù)、路由等都能通過模塊去組織。
Angular提供了@NgModule裝飾器來創(chuàng)建模塊，一個應(yīng)用可以有多個模塊，有且只有一個根模塊（Root Module），其他模塊叫做特性模塊(Feature Module)
根模塊是啟動應(yīng)用的入口模塊，根模塊必須通過bootstrap元數(shù)據(jù)來指定應(yīng)用的根組件，然后通過bootstrapModule()方法來啟動應(yīng)用。
建立一個根模塊，命名為AppModule，并將它保存為app,module.ts。
app.module.ts中通過@NgModule的bootstrap元數(shù)據(jù)指定AppComponent組件

import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({  declarations: [...],  imports: [...],  providers: [...],  bootstrap: [AppComponent]
})export class AppModule { }

AppComponent組件即為根組件。
再創(chuàng)建一個main.ts，利用platformBrowserDynamic().bootstrapModule()方法來啟動根模塊，并將AppComponent組件的內(nèi)容展示到頁面上。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

引用es-download組件

由于我們最開始是將es-download組件引入到components這個模塊中，并從這個模塊中導(dǎo)出的，所以想要在其它模塊中使用 es-download組件就得先引入components模塊。
將根模塊AppModule，作為父組件來引用一下es-download組件
首先在模塊里引用：

import { NgModule } from '@angular/core';import { ComponentsModule } from './components/components.module';@NgModule({  declarations: [...],  imports: [...,    ComponentsModule,
    ],
})export class AppModule { }

引入了components模塊就相當于是引入那個那個模塊中的所有組件和方法。

使用es-download組件

根據(jù)selector: 'app-es-download',所以要使用es-download這個組件，需要在HTML中添加自定義標簽
<app-es-download></app-es-download>，然后Angular便會在此標簽中插入EsDownloadComponent組件中指定的模板。

import { Component, OnInit } from '@angular/core';@Component({
  selector: 'app-es-download',  templateUrl: './es-download.component.html',  styleUrls: ['./es-download.component.css']
})

組件交互

事件交互

由于es-download.component.html中的按鈕有點擊事件

<button
  style="..."
  nz-button
  nzType="primary"
  (click)="esDownload()">
  數(shù)據(jù)庫下載</button>

所以es-download.component.ts中需要實例化一個用來訂閱和觸發(fā)自定義事件的EventEmitter類

import { Component, OnInit,Output,EventEmitter} from '@angular/core';//引入Output,EventEmitter@Component({  selector: 'app-es-download',  templateUrl: './es-download.component.html',  styleUrls: ['./es-download.component.css']
})export class EsDownloadComponent implements OnInit {  @Output() click = new EventEmitter(); //通過輸出屬性@Output將數(shù)據(jù)流向父組件......//點擊事件函數(shù)esDownload() {    .......  }}

數(shù)據(jù)交互

父組件將數(shù)據(jù)通過屬性綁定的方式流向子組件，子組件通過輸入屬性@Input獲取來自父組件的數(shù)據(jù)。
父組件的html文件：

<app-es-download [name]="name" ></app-es-download>

子組件的ts文件：

import { Component, OnInit,Output,EventEmitter,Input} from '@angular/core';@Component({  selector: 'app-es-download',  templateUrl: './es-download.component.html',  styleUrls: ['./es-download.component.css']
})export class EsDownloadComponent implements OnInit {
  @Output() click = new EventEmitter();  @Input() name:'';

其中name數(shù)據(jù)是通過裝飾器@Input來獲取來自父組件的name對象，數(shù)據(jù)由父組件流出，在子組件中通過輸入屬性@Input完成數(shù)據(jù)的接收。