本节我们共同来完成学生列表组件。 ## 新建组件 我们来到`src/app/stduent`文件中，执行`ng g c student --flat`来创建学生列表组件： ```bash panjie@panjies-iMac student % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/student panjie@panjies-iMac student % ng g c student --flat CREATE src/app/student/student.component.css (0 bytes) CREATE src/app/student/student.component.html (22 bytes) CREATE src/app/student/student.component.spec.ts (633 bytes) CREATE src/app/student/student.component.ts (279 bytes) UPDATE src/app/student/student.module.ts (401 bytes) ``` 教程中我们使用了太多遍的`ng g c xx`命令来创建组件，在创建过程中也使用过`-m`参数来指定组件模块，刚刚又使用了`--flat`参数（否则将创建student子文件夹）在当前文件夹中创建了组件。那么问题来了，我又是怎么知道这些参数的呢？答案很简单：帮助文档。 基本上每个命令都会有帮助文档，在`shell`中往往可以通过` --help`参数来获取到它们。如果这些命令必须加一些参数才能正常工作，则直接输入这个命令也可能得到一些帮助信息；如果这些命令是操作系统原生的，在`xunix`系统中还可以通过`man 命令名`来获取帮助文档。 `ng`是Angular cli提供的命令，可以使用`ng`来获取到帮助文档： ```bash panjie@panjies-iMac app % ng Available Commands: add Adds support for an external library to your project. analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering. build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory. deploy Invokes the deploy builder for a specified project or for the default project in the workspace. config Retrieves or sets Angular configuration values in the angular.json file for the workspace. doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword. e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor. extract-i18n (i18n-extract, xi18n) Extracts i18n messages from source code. generate (g) Generates and/or modifies files based on a schematic. help Lists available commands and their short descriptions. lint (l) Runs linting tools on Angular app code in a given project folder. new (n) Creates a new workspace and an initial Angular application. run Runs an Architect target with an optional custom builder configuration defined in your project. serve (s) Builds and serves your app, rebuilding on file changes. test (t) Runs unit tests in a project. update Updates your application and its dependencies. See https://update.angular.io/ version (v) Outputs Angular CLI version. For more detailed help run "ng [command name] --help" ``` 在学习过程中出现英文的提示新手往往就是一笑而过，完全不管开发者具体说了些什么。这是每个非英语为母语的程序员都必须改掉的坏毛病。试想下如果我们做为开发者，同样希望把重要的信息以文字的开工传递给使用者，如果我们开发的项目想被全球的程序员使用，则这个语言必然是英文的。以笔者多年的教学、开发经验来看，有绝大多数的问题都可以在提示信息中轻构的找到问题的根本原因，从而帮助我们快速的找到答案。 再比如我们还可以通过输入`ng g c --help`来看到生成组件时支持的参数，而教程中使用过的`-m`以及`--plat`参数则全部来源于该帮助文档。 ## 初始化 组件的初始化需要C、V的配合，在实际的开发过程中往往在先V后C，边V边C。 当在V层中需要什么属性性，便随时在C层中添加什么属性。 ```html <div class="row"> <div class="col-12 text-right"> <a class="btn btn-primary mr-2" routerLink="./add"><i class="fas fa-plus"></i>新增</a> </div> </div> <table class="table table-striped mt-2"> <thead> <tr class="table-primary"> <th>序号</th> <th>姓名</th> <th>学号</th> <th>手机号</th> <th>班级</th> <th>班主任</th> <th>操作</th> </tr> </thead> <tbody> <tr *ngFor="let student of pageData.content; index as index"> <td>{{index + 1}}</td> <td>{{student.name}}</td> <td>{{student.number}}</td> <td>{{student.phone}}</td> <td>{{student.clazz.name}}</td> <td>{{student.clazz.teacher.name}}</td> <td> <a class="btn btn-outline-primary btn-sm" routerLink="edit/{{student.id}}"> <i class="fas fa-pen"></i>编辑 </a> <span class="btn btn-sm btn-outline-danger" (click)="onDelete(index, student.id)"> <i class="far fa-trash-alt"></i>删除 </span> </td> </tr> </tbody> </table> ``` 对应C层文件： ```typescript import {Component, OnInit} from '@angular/core'; import {Page} from '../entity/page'; import {Student} from '../entity/student'; @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'] }) export class StudentComponent implements OnInit { pageData = {} as Page<Student>; constructor() { } ngOnInit(): void { } onDelete(index: number, id: number): void { } } ``` 在V层中使用到了路由模块的相关功能，所以在单元测试中加入路由测试模块： ```typescript import {ComponentFixture, TestBed} from '@angular/core/testing'; import {StudentComponent} from './student.component'; import {RouterTestingModule} from '@angular/router/testing'; describe('StudentComponent', () => { let component: StudentComponent; let fixture: ComponentFixture<StudentComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [StudentComponent], imports: [ RouterTestingModule ] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(StudentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); fit('should create', () => { expect(component).toBeTruthy(); }); }); ``` 最终效果如下：  | 名称 | 链接 | | -------- | ------------------------------------------------------------ | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step7.4.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.4.zip) |