从零详细搭建一个简单的angular项目（7）angular的组件拆分组装篇

在本节主要讲的是@Input的使用
还是以之前的项目为例，不知道的同学可以看一下本系列前面的文章，这整个系列学完，你能做一个简单angualr的demo，涵盖大多数angualr的知识点，非常好的学习方式。
当然没看过也无妨，继续往下看吧。
拆分是为了让组件复用，组装则是让拆分的组装成你想要的效果。

举例说明：
我们创建了一个界面，界面中有两个DIV，上面的DIV是一个导航，下面的DIV是点击导航不同的栏目，展示的不同的效果。
当导航有3个栏目时，3个栏目依次点击，我们会看到三个不同的界面，三个界面也不是完全不同，至少导航的那一块是完全一样的，所以我们要把导航这个部分“拆分”出来。
这里就不展示全部了，都是尽可能描述怎么做，这需要一些angualr的基本知识，建议回去看看这个系列的上面几篇文章。
导航的ts文件：

选择器名：navhahah

导航的html文件：

就是个导航，自己用li写一个把。

回到最开始，下面DIV展示的是不一样的界面，那么我们就需要做三个不同的html文件，这里也是自己看着做吧，
需要提出的是，我们要在每个html文件的上面的部分，这样写：

<navhahah></navhahah>

这个navhahah就是我们上面定义的选择器，这样就能在我们的“展示html”中都引入一样的导航了。
不太懂没关系，可以去看看系列文章中选择器的应用。

但是引入归引入，还有一个问题，我们怎么根据导航点击哪个栏目，展示对应的html呢，这两个DIV没有数据交互，相互独立。
这时候就需要@Input了。

我们在导航的ts文件中：

类的方法里声明一个变量：
@Input()  selectedLanmu:string;

这里的selectedLanmu就是选择的栏目的变量，后面string是他的值。
跟一般变量定义不同的是，多了个@Input
这个东西有什么用呢？
我们在“展示html”的文件中

<navhahah [selectedLanmu]="你选择的1栏目"></navhahah>

看出来了吧，@Input就是让你的自定义的选择器，有了属性，并且能够传递。

这里因为要考虑到没看过系列文章的同学，所以基本没有代码，都是在讲原理，等该系列文章结束，我会在最后一篇上挂上整个demo的下载连接，同学们可以下载项目，对照学习，事半功倍。
下一篇：
从零详细搭建一个简单的angualr项目（8）angualr的服务篇