angular 创建简单的组件

转载自 http://www.ngui.cc/news/show-111.html

新建组件

$ ng generate component simple-form --inline-template --inline-style 

# Or 

$ ng g c simple-form -it -is # 表示新建组件，该组件使用内联模板和内联样式

在命令行窗口运行以上命令后，将输出以下内容：

installing component
  create src/app/simple-form/simple-form.component.spec.ts 

  create src/app/simple-form/simple-form.component.ts 

  update src/app/app.module.ts

即执行上述操作后，创建了两个文件：

• simple-form.component.spec.ts - 用于单元测试

• simple-form.component.ts - 新建的组件

除此之外，update src/app/app.module.ts 表示执行上述操作后，Angular CLI 会自动帮我们更新 app.module.ts 文件。

所更新的内容是把我们新建的组件添加到 NgModule 的 declarations 数组中，具体如下：

@NgModule({
  declarations: [
    AppComponent,
    SimpleFormComponent
  ],
  ...
}) 

export class AppModule { }

使用组件

AppComponent

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

@Component({
  selector: 'app-root',
  template: `
    <h3>{{title}}</h3>
    <div>
      <app-simple-form></app-simple-form>
    </div>
  ` }) 

export class AppComponent {
  title = 'Hello, Angular';
}

SimpleFormComponent

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

@Component({
  selector: 'app-simple-form',
  template: `
    <p>
      simple-form Works!
    </p>
  `,
  styles: []
}) 

export class SimpleFormComponent implements OnInit { 

constructor() { }

  ngOnInit() {
  }
}

从生成的 SimpleFormComponent 组件中，我们发现组件的 selector 是 app-simple-form，而我们是使用以下命令创建该组件：

$ ng g c simple-form -it -is

即 Angular CLI 在创建组件时，自动帮我们添加了前缀。那为什么前缀是 app 呢？答案是在项目根目录下的 .angular-cli.json 文件中，已经默认帮我们配置了默认的前缀，具体如下：

{
  ... "apps": [
    { "root": "src", "outDir": "dist",
      ... "prefix": "app",
       ...
    }
  ],
}

当然你可以根据实际需求，自行更改默认的前缀配置。