如何在Angular中使用CLI创建新组件

事实证明，在Angular中构建自己的新组件时，你可以像我们在Angular组件教程中所做的那样，完全用手完成这一过程。这对学习Angular组件的细节很有帮助。我们都喜欢自动化，而你实际上可以使用Angular CLI自动构建一个新的Angular命令！这听起来很不错，因为可以减少输入的次数。这听起来很不错，因为在我的书中，减少输入代码是一种奖励。让我们尝试构建另一个Angular组件，但这次我们将利用非常方便的Angular命令行界面。

---

CLI组件生成

你要让 ng serve进程已经在你的应用程序的命令行窗口中运行。然后，你可以打开另一个命令行的实例，并输入 ng generate component virtual-machines来创建一个新的虚拟机器组件。

好的非常有趣！这是个很好的例子。看起来CLI自动创建了一个新的文件夹来存放我们的新组件。 app/virtual-machines.此外，我们还看到四个与自动生成的组件相关的新文件。

• virtual-machines.component.html

<p>
  virtual-machines works!
</p>

• virtual-machines.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { VirtualMachinesComponent } from './virtual-machines.component';

describe('VirtualMachinesComponent', () => {
  let component: VirtualMachinesComponent;
  let fixture: ComponentFixture<VirtualMachinesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ VirtualMachinesComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(VirtualMachinesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

• virtual-machines.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

• virtual-machines.component.css

/* todo: add your styles here */

---

嵌套Angular组件

现在我们的应用程序有两个自定义构建的组件。它们是virtual-machine和virtual-machines。现在，我们的virtual-machines组件的目的是为了容纳一个或多个虚拟机器组件的实例。因此，我们要将虚拟机 嵌套在虚拟机的内部。我们可以打开virtual-machines.component.html，删除我们在上面看到的默认标记。我们将用虚拟机组件的两个实例来代替它，像这样。

<app-virtual-machine></app-virtual-machine>
<hr>
<app-virtual-machine></app-virtual-machine>

现在，回忆一下，当我们手工构建一个angular组件时，我们必须在app.modules.ts文件中手动注册该组件。像我们在这里使用命令行构建Angular组件的好处是，这个步骤会自动为你处理。下面突出显示的是我们新的virtual-machines组件的导入语句和对声明数组的添加。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { VirtualMachineComponent } from './virtual-machine/virtual-machine.component';
import { VirtualMachinesComponent } from './virtual-machines/virtual-machines.component';

@NgModule({
  declarations: [
    AppComponent,
    VirtualMachineComponent,
    VirtualMachinesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在我们要检查virtual-machines.component.tsTypescript文件，看看CLI也自动为@Component装饰器和它的配置，包括选择器、templateUrl和styleUrls。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

---

使用新的组件!

最后，为了使用我们刚刚建立的新Angular组件，我们需要更新app.component.html。

<div class="jumbotron">
  <div class="container">
    <app-virtual-machines></app-virtual-machines>
  </div>
</div>

那么现在应该发生什么呢？嗯，现在在主app.component.html文件中有一个的实例。我们在该组件内嵌套了两个的实例。这意味着此时我们应该在页面上看到两个虚拟机组件，这正是我们访问浏览器时得到的结果。

我们也可以在Chrome开发工具中检查生成的标记，发现确实有两个Angular组件嵌套在外包装组件里面。

<app-virtual-machines _ngcontent-c0="" _nghost-c1="">
    <app-virtual-machine _ngcontent-c1=""><h1>The Virtual Machine Component</h1></app-virtual-machine>
    <hr _ngcontent-c1="">
    <app-virtual-machine _ngcontent-c1=""><h1>The Virtual Machine Component</h1></app-virtual-machine>
</app-virtual-machines>

---

如何使用CLI在Angular中创建新组件总结

本教程给了我们一个很好的概述，即如何通过使用有用的angular命令行界面来创建新的angular组件。我们还看到了如何在其他组件中嵌套组件。我们能够在任何其他组件的任何其他模板中使用组件选择器。