新建組件
cmd進入項目目錄，然后執(zhí)行以下代碼
// 新建了一個名字叫test的組件
ng generate component test
// 簡寫
ng g c test
若不指定路徑，新建成功后，你會看到 src/app 中多了一個 test文件夾，其中新建了testComponent的4個文件。spec.ts是測試文件，可以忽略，一般來說我會直接刪掉。
testComponent
當(dāng)使用 ng語法創(chuàng)建組件時，創(chuàng)建的組件會自動在 app.module.ts 這個文件中聲明；所以如果是手動創(chuàng)建組件的小伙伴，記得要在這個文件中導(dǎo)入且聲明你新建的組件喲。當(dāng)然，你刪除一個組件的時候，對應(yīng)的，也需要在這個文件中把導(dǎo)入聲明的組件刪除。否則嘛，會報錯的鴨！
app.module.ts
組件ts文件中代碼解釋
test.component.ts
@Component() 是一個裝飾器，用于為該組件指定 Angular 所需的元數(shù)據(jù)。其中有3個默認(rèn)參數(shù)：selector：組件選擇器； 當(dāng)我們在別的組件中使用test組件，就需要用到這個名稱了；templateUrl： 模板文件路徑； 即組件使用的html路徑styleUrls： 組件私有css文件路徑
下面舉個栗子：
首先我在 test.component.ts中，聲明一個變量；
變量name
然后去模板文件 test.component.html中：
html
為了方便，我就不新建別的組件了，直接在根組件中使用創(chuàng)建好的test組件，使用方法如下：
app.componnet.html
紅框框起來的地方是不是很眼熟？沒錯，就是test組件選擇器的名稱。最后，運行項目，可以看到這樣一個界面。
運行結(jié)果
有關(guān)一些報錯
-
More than one module matches. Use skip-import option to skip importing the component into the closes
解決方式：ng g c test --module=app
