Day 12：想要快速产出元件及范本，就用 Angular CLI 吧！（二）

让 Angular 元件显示在画面上

上一篇，我们建立了一个元件 page1。

接下来，我们就要把 page1 这个元件，显示在如下图的 Angular 应用程序的画面上。

首先，我们要先把 page1 元件注册到 Angular 根元件 AppComponent 的 HTML Template 里头。

所以我们先到 page1.component.ts 这个档案，找到相对应的选取器，如下图中的 app-page1，并且把 app-page1 这个文字复制下来。

由於我们必须把元件输出到根元件的画面上，所以就要找到 app.component.html 这支档案，并把 app-page1 化为标签的形式，插入 app.component.html 中，这也表示 page1 这个元件执行的结果，会放进 app-page1 的标签内。

你会发现，强大的 Angular 已经能找到 app-page1 这个元件了，所以，我们可以直接点选该选项，并找个比较醒目的位置贴上（位於 Template 内容的最下方），让标签插入 HTML Template 之中，如下图。

接着存档，再切到 Angular 应用程序的首页，你就会发现 page1 已经显示在画面上了。

补充一下，app-page1 的内容就是 page1.component.html 这个档案的内容。

未来我们还会建立许多 Angular 元件，并用类似的方法，将元件呈现在画面之中，而上面所述的流程，仅是其中一种元件的建立方法。

如果想知道我们还能透过 Angular CLI 建立多少种类的元件，可以在终端机面板输入以下指令：

ng generate -h

就可以看到以下的清单，代表可以透过 ng generate 所产生的元件或程序码的范本，之後当我们使用到其中的范本时，再来进一步的说明。

把 Angular 预设的 Template 移到元件中

首先我们打开 app.component.html 这支档案，并且把除了 app-page1 标签外的所有内容全都剪下。

此时，在 app-page1 这个标签上点击一下，让游标移至这个标签上，并按下 f12 键，就会打开 page1.component.ts 这支档案。

再来，接着点击 ./page.component.html，将游标移至此处。

然後使用快捷键 alt+o，就会打开 page1.component.html 这支档案。

如果此时再使用 alt+o，会返回 page1.component.ts 这个档案。

把我们刚才从 app.component.html 剪下的 HTML 程序码，贴至 page1.component.html 里并存档，本以为大功告成了，却喷出一个错误！

白话文解释，就是 page1.component.html 里有用到 {{ title }} 这一个 property，但是在 Page1Component 里却找不到！

这个时候我们就先回到 app.component.ts 这个档案，确实有发现 title 这个 property 了！

我们只要把 title 这个 property 剪下，并且到 page1.component.ts 里的 class 处贴上。

此时，错误讯息消失，开发服务器又能重新运行，从 Chrome 开发人员工具可以看到，所有的网页内容都被搬到 app-page1 的标签里了，如此一来，搬家作业就算大功告成了！