Angular新建組件以及組件之間的調用


場景

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,然后修改頭組件的內容

 

 

然后在新聞組件中引入頭組件

 

 

運行后效果

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM