讓 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 的標籤裡了，如此一來，搬家作業就算大功告成了！