用 ng generate hello-world 命令生成 hello-world 组件
![这里写图片描述](https://img-blog.csdn.net/20171229113301878)
在hello-world.component.ts中定义组件
![这里写图片描述](https://img-blog.csdn.net/20171229114619500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRWRpc29uXzAz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
代码贴在文章末尾:代码1
在app.component.html中使用刚定义好的组件(标签)
![这里写图片描述](https://img-blog.csdn.net/20171229130542850?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRWRpc29uXzAz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
代码贴在文章末尾:代码2
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello-world',
template:
`<p>
hello-world works!
</p>
`
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}