場(chǎng)景

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

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

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

?

注：

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

實(shí)現(xiàn)

然后使用命令行來(lái)到項(xiàng)目目錄下或者直接使用VSCode下的終端

新建組件的命令

ng g component 模塊名

如果直接使用ng g component 組件名的話(huà)會(huì)默認(rèn)在app下新建一個(gè)模塊。

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

ng g component components/news

?

這樣就會(huì)在app下新建一個(gè)components目錄并在此目錄下新建一個(gè)news目錄

?

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

?

引用組件

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

如果沒(méi)有更改默認(rèn)名字如下

?

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

?

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

?

然后運(yùn)行項(xiàng)目查看效果

?

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

?

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

?

運(yùn)行后效果

?

總結(jié)

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

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