Angular 学习笔记：创建组件

新建组件

cmd进入项目目录，然后执行以下代码

// 新建了一个名字叫test的组件
ng generate component test
// 简写
ng g c test

若不指定路径，新建成功后，你会看到 src/app 中多了一个 test文件夹，其中新建了testComponent的4个文件。spec.ts是测试文件，可以忽略，一般来说我会直接删掉。

testComponent

当使用 ng语法创建组件时，创建的组件会自动在 app.module.ts 这个文件中声明；所以如果是手动创建组件的小伙伴，记得要在这个文件中导入且声明你新建的组件哟。当然，你删除一个组件的时候，对应的，也需要在这个文件中把导入声明的组件删除。否则嘛，会报错的鸭！

app.module.ts

组件ts文件中代码解释

test.component.ts
@Component() 是一个装饰器，用于为该组件指定 Angular 所需的元数据。其中有3个默认参数：
selector：组件选择器； 当我们在别的组件中使用test组件，就需要用到这个名称了；
templateUrl： 模板文件路径； 即组件使用的html路径
styleUrls： 组件私有css文件路径

下面举个栗子：
首先我在 test.component.ts中，声明一个变量；

变量name

然后去模板文件 test.component.html中：

html

为了方便，我就不新建别的组件了，直接在根组件中使用创建好的test组件，使用方法如下：

app.componnet.html

红框框起来的地方是不是很眼熟？没错，就是test组件选择器的名称。最后，运行项目，可以看到这样一个界面。

运行结果

---

有关一些报错

1. More than one module matches. Use skip-import option to skip importing the component into the closes
   解决方式： ng g c test --module=app