angular从0到1:如何创建和使用一个组件
原文链接:这里
0.组件和组件之间的关系
试想一个情景,你使用word的时候,word最上方的菜单栏几乎没动过,下面的二级菜单却在随着一级菜单的变化而变化,例如下面这样:
在上面的例子中,红框标记的部分算是一个”组件“,这个组件并不会频繁的刷新,当你点击某个组件(一级菜单)的时候,下面的二级菜单(组件)会更新,而一级菜单不会更新,这就减少了一些请求量。组件和组件之间是通过挂载的方式实现关联。可以用下面的图表示。
![](https://www.longkui.site/wp-content/uploads/2020/12/image-169.png)
1.创建一个组件
首先把项目服务结束掉,然后我们在我们创建的项目myapp目录下进行组件创建,创建指令参考
ng g component 组件名称
或
ng g component 路径/组件名称
举例,我们创建一个menu的组件,可以使用
ng g component menu
或
ng g component fun/menu
后者表示先新建一个文件夹,然后在文件夹里面新建一个组件
创建完的组件如下:
![](https://www.longkui.site/wp-content/uploads/2020/12/image-163.png)
2.挂载并显示组件
我们创建完毕后,需要在app.moudle.ts中挂载我们刚创建的组件。但是,我们如果是通过命令行的形式创建的组件,app.moudles.ts中是自动创建引用的。如下:
我们现在要在根组件中挂载刚才搭建的如何挂载显示呢?首先,我们记录一下刚才创建的组件名字。
然后我们来到根组件,app.compoment.html,把里面的内容清空,填入下面的内容,然后ng serve –open 或 npm run start 重新运行。
![](https://www.longkui.site/wp-content/uploads/2020/12/image-167.png)
![](https://www.longkui.site/wp-content/uploads/2020/12/image-168.png)
然后浏览器运行可以看到,menu组件成功在根组件中挂载运行了。