場景
Angular介紹、安裝Angular Cli、創建Angular項目入門教程:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
在上面搭建好Angular項目。項目目錄結構如下
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
然后使用命令行來到項目目錄下或者直接使用VSCode下的終端
新建組件的命令
ng g component 模塊名
如果直接使用ng g component 組件名的話會默認在app下新建一個模塊。
為了規范開發,可以直接在模塊名前面加上路徑,比如
ng g component components/news
這樣就會在app下新建一個components目錄並在此目錄下新建一個news目錄
此時可以看到news下一個完整的組件所需的文件都已經建立完成,而且在app.module.ts也已經引入當前組件。
引用組件
加入我們要在根組件中引用上面新建的新聞組件,首先來到新聞組件的news.components.ts中,找到其selector所對應的使用此組件時的名字。
如果沒有更改默認名字如下
然后來到app.component.html中將此頁面清空,然后添加上面新聞組件名字對應的標簽。
為了看到效果,修改新聞組件下的news.components.html
然后運行項目查看效果
同理如果想在新聞組件中調用其他組件,首先新建一個頭組件header,然后修改頭組件的內容
然后在新聞組件中引入頭組件
運行后效果