angular6学习(五)：创建组键

た入场券 2022-05-08 23:38 162阅读 0赞

两种创建方式：手动创建和命令创建

**手动创建：**

一：基础知识：

![70][]

![70 1][]

代码说明：

![70 2][]

二：代码实现：

![70 3][]

2.ts文件中添加修饰器和引入模板

![70 4][]

1.  `import {Component} from '@angular/core';`
2.   
3.  `@Component({`
4.  `selector: 'app-server',`
5.  `templateUrl: './server.component.html'`
6.  `})`
7.  `export class ServerComponent {`
8.   
9.  `}`

3. html文件中添加内容

![70 5][]

1.  `<!DOCTYPE html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.  `<title>Title</title>`
6.  `</head>`
7.  `<body>`
8.  `<p>这是一个server主键</p>`
9.  `</body>`
10. `</html>`
11.

4. 在文件app.modul.ts中添加server组键

![70 6][]

5. 在文件app.componert.html中引用server组键

![70 7][]

显示如下：

![70 8][]

**命令创建：**

一：Alt+F12 打开命令模式，输入  ng generate component servers

或者缩写 ng g c servers

指定创建组键servers

自动创建组建目录和文件，并自动在modul中添加

![70 9][]

![70 10][]

二： 在文件app.componert.html中引用servers组键即可

![70 11][]

\--------------------- 本文来自 七刀 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/u011321546/article/details/80739636?utm\_source=copy

[70]: /images/20220509/8b8ce1ca78564233bf241d032dc9995f.png
[70 1]: /images/20220509/a7c64564f18d4e2aa9eb82b1fc12907c.png
[70 2]: /images/20220509/f050a1c9e90140ab90e56f6bb67accaa.png
[70 3]: /images/20220509/b3b9e571c00e4231841ace7055207fbb.png
[70 4]: /images/20220509/3f49f47df9c84ff79818116ca7b2e23f.png
[70 5]: /images/20220509/8b4b508b06994f1289f9fb06dc4cd8d0.png
[70 6]: /images/20220509/4886bf713fa24a00a6fe97f4966aac44.png
[70 7]: /images/20220509/67347bb1881c4a6ab747543cbedab320.png
[70 8]: /images/20220509/ca04b249c23a4a98afd2a970510d5d37.png
[70 9]: /images/20220509/b39929ba4bcb4b6a8ebcc768fca98682.png
[70 10]: /images/20220509/38e8ad7437684dbc844cf0134c551f04.png
[70 11]: /images/20220509/2a5d06019b364972a8bee317fd07a572.png