angular6.0教程：angular如何创建自定义组件

我们已经在电脑上安装好了angular6.0，并且也通过angular6.0创建了一个demo1的项目。接下来，我们就要针对这个demo1项目进行相应的开发。本章，我们来给项目新建几个component组件。

创建一个自定义组件，其实很简单，进入命令行工具，再进入到demo1目录，输入以下命令：

angular6.0教程

ng  g  component  home   创建一个名为home的组件。

创建完后，会自动在app目录下生成1个home目录，home目录下会生成4个文件，如下图：

上图中，home.component.css是这个组件的css样式文件，home.component.html是该组件的html文件，home.component.ts是该组件的JS文件。同时，home组件创建完成后，会自动在app.module.ts主模块中导入这个home组件，如下图：

在 Angular 中，是使用 Component 装饰器来定义组件的元信息，如下图：

selector:'app-home'：用于定义组件在HTML代码中匹配的标签，这样，我们可以在其它组件中通过来调用这个组件。

templateUrl:'./home.component.html'：定义组件内嵌视图。

styleUrls:['./home.component.css']：定义了组件css样式文件。

export class HomeComponent implements OnInit {}：定义组件类。组件需要实现的功能，都在这个区域书写。

组件创建好后，我们就可以给这个组件添加我们所需要的功能了。