创建组件在components文件夹下创建一个数据库下载的公用组件。 打开命令行(使用vscode编辑器的小伙可以直接使用Ctrl+` 快捷键打开终端,然后一路跳转到components文件夹: cd src\app\components 在此目录下执行指令: ng g c es-download 上面指令的意思是创建一个名为es-download的组件, 使用上面的指令创建的组件是会前端培训被自动引用到components这个模块中的。 import { EsDownloadComponent } from './es-download/es-download.component'; //引入组件@NgModule({ declarations: [..., EsDownloadComponent],//声明组件}) 上面是在使用ng g c es-download指令时自动完成的 但若是想在其它的模块中使用这个es-download组件,还得将其导出。 导出的方式是将这个组件添加至components.module.ts文件的exports中: @NgModule({ declarations: [..., EsDownloadComponent], imports: [...], exports: [..., EsDownloadComponent], })export class ComponentsModule { } 组件的基础概念查看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中,设置了selector自定义标签和template模板。组件的几个关键知识点如下: 组件与模块模块是在组件之上的一层抽象,组件以及指令、管道、服务、路由等都能通过模块去组织。 import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({ declarations: [...], imports: [...], providers: [...], bootstrap: [AppComponent] })export class AppModule { } AppComponent组件即为根组件。 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这个模块中,并从这个模块中导出的,所以想要在其它模块中使用 es-download组件就得先引入components模块。 import { NgModule } from '@angular/core';import { ComponentsModule } from './components/components.module';@NgModule({ declarations: [...], imports: [..., ComponentsModule, ], })export class AppModule { } 引入了components模块就相当于是引入那个那个模块中的所有组件和方法。 使用es-download组件根据selector: 'app-es-download',所以要使用es-download这个组件,需要在HTML中添加自定义标签 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()"> 数据库下载</button> 所以es-download.component.ts中需要实例化一个用来订阅和触发自定义事件的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将数据流向父组件......//点击事件函数esDownload() { ....... }} 数据交互父组件将数据通过属性绑定的方式流向子组件,子组件通过输入属性@Input获取来自父组件的数据。 <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数据是通过装饰器@Input来获取来自父组件的name对象,数据由父组件流出,在子组件中通过输入属性@Input完成数据的接收。 |
|