Angular8 实战（七）【初识组件】顶部TabBar

本章主要讲解组件的基础概念及应用。

什么是组件？

组件由模板、样式、类、元数据组成。如下图，每一个组成部分都有各自的主要职责。

image.png

1.gif

通过根组件app.component讲解来认识组件

1. 一个完整的组件一般由四个文件组成：

   • app.component.html
   • app.component.css
   • app.component.ts
   • app.component.spec.ts //凡是带spec的都是测试文件

2. app.component.ts

   1. 引入Angular公共模块，服务，组件等
   2. @Component 称为组件元数据装饰器，简称装饰器，用来告知Angular框架如何处理一个typescript类。Component装饰器包含多个属性，这些属性的值叫元数据，angualr会根据这些属性的值来渲染组件并执行组件的逻辑
   3. selector 选择器，上一篇中我们讲angular.json时讲到prefix，就是这里的app。改了prefix，在之后创建组件时，选择器中的前缀也会跟着改变。选择器的作用是：当其它页面想嵌入此页面时，可通过<app-root></app-root>标签来调用，并展示组件的内容。
   4. templateUrl 模板，通过组件自带的模板（app.component.html）来定义组件的外观，模板是以HTML的形式存在，告诉Angular应该如何来渲染组件。同样，我们也可以在模板中使用angular的数据绑定语法来呈现控制器中的数据。
   5. styleUrls css样式文件（app.component.css），组件可以关联一些样式表文件来更好的渲染组件的模板文件
   6. 定义了组件的控制器，控制器是指被@Component装饰器装饰的typescript类，它包含模板相关的所有属性和方法，与页面相关的大部分逻辑都编写在这个控制器中。控制器通过数据绑定与模板通讯，模板展现控制器的数据，控制器处理模板上发生的事件。AppComponent就是一个标准的typescript类，类里面没有框架的痕迹，就是用装饰器将元数据附加到AppComponent类上。
   7. title AppComponent类中定义的属性，属性值会被展示到模板中。
   8. 输入属性：@Input()，用来接收外部传入的数据，输入属性使得父组件直接传递数据给子组件。angular程序其实就是一个组件树，输入属性允许在组件树种传递数据。

   9. 输出属性：@Outputs()，与前面的输入属性相对的，定义一个其它组件需要的事件或属性在组件间共享数据。

      
      
      image.png

3. app.component.html

   1. 数据绑定{{title}}，就是模板的各个部分与控制器的各个部分相互作用的一个机制。我们在模板种添加绑定标记，如何把二者关联起来{{title}}是最常见的将控制器的值绑定到模板种的绑定方法，叫差值表达式。

      
      
      image.png
   2. Angular 中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式
      • 数据文本绑定，使用{{}}
        在组件类中声明属性 public test1="测试数据文本绑定"; ，然后在模板中绑定属性{{test1}}
      • 绑定Html，可以使用绑定属性的方式，给div绑定innerHTML属性
        在组件类中声明属性public test2="<h2>用h2标签来测试绑定Html</h2>"，然后在模板中通过[]绑定，如：<div innerHTML="test2"></div>
      • 属性绑定，上面可知使用[]来绑定元素的属性
        在组件类中声明属性

        public id="testId"; 
        public title="test title"
        

        在模板中通过[]绑定
        <div [id]="id" [title]="title">测试属性绑定</div>
      • 双向绑定
        使用数据双向绑定需要在项目中引入FormModule，在根模块app.module.ts中引入
        
        image.png
        
        在组件类中声明属性
        public inputValue="default value"
        在模板中通过[(ngModel)]绑定
        <input type="text" [(ngModel)]="inputValue"/>{{inputValue}}

完成顶部TabBar

我们打开pinduoduo，F12 选择设备为iPhone X，可以看到顶部导航栏可左右滑动，但不会上下移动。底部也是固定不动的。

2.gif

根据上面gif的演示，我们可以大概知道首页的组件结构，如下：

image.png

下面我们在AppComponent中实现顶部导航栏，暂时不考虑从API 获取数据源，全部在前端hardcode一部分数据源。

1. 首先，导航栏部分有好多个tab项，“推荐”，“女装”，“鞋包”，“家装”。。。每一个都手动在html文件中写是不友好的，而且代码看上去也不美观，对于以后tab项的维护也不是很方便。所以，我们先在组件类中声明属性topBars，然后在模板中绑定即可。

• 组件类中声明属性
  public topBars = ['热门', '女装', '男装', '鞋包', '家装', '家居百货', '汽车', '美食', '儿童', '母婴'];
• 模板中绑定组件类中声明的属性并循环此属性值 （ngFor 后面章节会有细解）

  <ul>
    <li *ngFor="let item of topBars">{{item}}</li>
  </ul>
  

• 样式文件中调整显示

  ul{
           padding:0;
           margin:0;
   }
  
  ul li{
           display: inline-block;
           margin: 0 5px;
  }
  
  

此时一个不可拖动的顶部导航栏就完成了，如下图

image.png

滚动部分会在下一节讲解~