创建组件

在项目目录或 app 目录下执行以下命令：

# 在 src/app/components 目录中创建名为 news 的组件
$ ng g component components/news
CREATE src/app/components/news/news.component.html (19 bytes)     # HTML 模板
CREATE src/app/components/news/news.component.spec.ts (612 bytes) # 单元测试
CREATE src/app/components/news/news.component.ts (268 bytes)      # 定义逻辑
CREATE src/app/components/news/news.component.scss (0 bytes)      # CSS 样式
UPDATE src/app/app.module.ts (399 bytes)

通过命令创建组件成功后，会自动将该组件引入并配置到根模块 src/app/app.module.ts 当中：

…………
// 引入 news 组件
import { NewsComponent } from './components/news/news.component';
@NgModule({
  // 告诉 Angular 哪些组件属于该模块
  declarations: [
    // 根组件
    AppComponent,
    // news 组件
    NewsComponent
  ],
  …………
})
export class AppModule { }

在组件中使用其他组件

假设我们要在根组件当中使用 news 组件，只需要在根组件的 HTML 模板（src/app/app.component.html）中标记 news 组件对应的标签即可。

…………
<!-- 为了展示清晰，我们将其他内容注释掉，添加以下内容 -->
<p>app works!</p>
<!-- 标签名为 news 组件（src/app/components/news/news.component.ts）的 @Component.selector 的值 -->
<app-news></app-news>

我们再次运行项目（npm start），即可在网页中看到 news 组件的 HTML 模板（src/app/components/news/news.component.html）的内容。

同理，我们可以创建一个 header 组件并在 news 组件中使用。

在项目目录或 app 目录下执行此命令创建 header 组件
$ ng g component components/header

通过命令创建组件成功后，会自动将该组件引入并配置到根模块中。
然后我们在 new 组件中使用 header 组件：

<p>news works!</p>
<app-header></app-header>

在项目启动状态下修改源码，项目会自动编译，编译成功后网页会自动刷新，我们就可以看到 app-root 标签下有一个 app-news 标签，其下又有一个 app-header 标签。