場景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

在上面搭建好Angular項目。項目目錄結(jié)構(gòu)如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

然后使用命令行來到項目目錄下或者直接使用VSCode下的終端

新建組件的命令

ng g component 模塊名

如果直接使用ng g component 組件名的話會默認在app下新建一個模塊。

為了規(guī)范開發(fā)，可以直接在模塊名前面加上路徑，比如

ng g component components/news

?

這樣就會在app下新建一個components目錄并在此目錄下新建一個news目錄

?

此時可以看到news下一個完整的組件所需的文件都已經(jīng)建立完成，而且在app.module.ts也已經(jīng)引入當(dāng)前組件。

?

引用組件

加入我們要在根組件中引用上面新建的新聞組件，首先來到新聞組件的news.components.ts中，找到其selector所對應(yīng)的使用此組件時的名字。

如果沒有更改默認名字如下

?

然后來到app.component.html中將此頁面清空，然后添加上面新聞組件名字對應(yīng)的標(biāo)簽。

?

為了看到效果，修改新聞組件下的news.components.html

?

然后運行項目查看效果

?

同理如果想在新聞組件中調(diào)用其他組件，首先新建一個頭組件header,然后修改頭組件的內(nèi)容

?

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

?

運行后效果

?

總結(jié)

以上是生活随笔為你收集整理的Angular新建组件以及组件之间的调用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。