资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【CuteJavaScript】Angular6入门项目（2.构建项目页面和组件）

【CuteJavaScript】Angular6入门项目（2.构建项目页面和组件）

Lemon_95 / 1028人阅读

摘要：编写单一组件我们首先写一个书本信息的组件，代码如下单个课本像火焰像灰烬程姬知识点是一个的复写器指令，就像中的和中的。写到这里，看看我们项目，还是一样正常在运行，只是现在项目中组件分工更加明确了。

本文目录

一、项目起步

二、编写路由组件

三、编写页面组件

1.编写单一组件

2.模拟数据

3.编写主从组件

四、编写服务

1.为什么需要服务

2.编写服务

五、引入RxJS

1.关于RxJS

2.引入RxJS

3.改造数据获取方式

六、改造组件

1.添加历史记录组件

2.添加和删除历史记录

七、HTTP改造

1.引入HTTP

2.通过HTTP请求数据

3.通过HTTP修改数据

4.通过HTTP增加数据

5.通过HTTP删除数据

6.通过HTTP查找数据

本项目源码放在github

三、编写页面组件

接下来开始编写页面组件，这里我们挑重点来写，一些布局的样式，后面可以看源码。

1.编写单一组件

我们首先写一个书本信息的组件，代码如下：




  

    
    

      
      
像火焰像灰烬

      
程姬

知识点：
*ngFor 是一个 Angular 的复写器（repeater）指令，就像angular1中的ng-for和vuejs中的v-for。 它会为列表中的每项数据复写它的宿主元素。
这时候可以看到页面变成下面这个样子：

接下来我们要把写死在HTML上面的数据，抽到JS中：

现在先新建一个books.ts文件来定义一个Book类，并添加id，url，title和author四个属性：

// src/app/books.ts
export class Book {
    id: number;
    url: string;
    title: string;
    author: string;
}

然后回到index.component.ts文件去引入它，并定义一个books属性，使用导入进来的Book类作为类型：

// index.component.ts
import { Book } from "../books";
export class IndexComponent implements OnInit {
  books: Book = {
    id: 1,
    url: "https://img3.doubanio.com/view/subject/m/public/s29988481.jpg",
    title: "像火焰像灰烬",
    author: "程姬",
  }
}

然后再改造前面的组件文件index.component.html:




  {{books.id}}
  

    {{books.title}}
  

  
{{books.author}}

接着，我们再为每个课本添加一个点击事件，来实现点击封面图能查看大图的效果，现在index.component.ts中定义一个getDetailImage方法，并在index.component.html中绑定该方法：

// index.component.ts
export class IndexComponent implements OnInit {
  getDetailImage(books){
    alert(`正在查看id为${books.id}的大图！`);
  }
}

这边方法的具体实现，不写，不是本文重点。下面是增加点击事件的绑定：


{{books.id}}

知识点：
(click)是Angular用来绑定事件，它会让 Angular 监听这个 元素的 click 事件。 当用户点击 时，Angular 就会执行表达式 getDetailImage(books)。

再来，我们引入前面学到的路由链接指令来改造HTML：


{{books.title}}

这时候，我们在点击书本的标题，发现页面跳转到URL地址为http://localhost:4200/detail/1的页面，这就说明，我们页面的路由跳转也成功了~

改造完成后，可以看到，页面显示的还是一样，接下来我们先这样放着，因为我们后面会进行数据模拟，和模拟服务器请求。

我们就这样写好第一个单一组件，并且数据是从JS中读取的。

2.模拟数据

这时候为了方便后面数据渲染，我们这里需要模拟一些本地数据，我们创建一个本地 mock-books.ts文件来存放模拟的数据：

// app/mock-books.ts
import { Books } from "./books";
export const BookList: Books[] = [
    {
        id: 1, 
        url: "https://img3.doubanio.com/view/subject/m/public/s29988481.jpg",
        title: "像火焰像灰烬",
        author: "程姬",
    },
    // 省略其他9条
]

然后在index.component.ts中导入模拟的数据，并将原有的books值修改成导入的模拟数据BookList：

// index.component.ts
import { BookList } from "../mock-books";
books = BookList;

并将原本的*ngFor中修改成这样，绑定真正的数据：




  {{item.id}}
  

    {{item.title}}
  

  
{{item.author}}
3.编写主从组件

当我们写完一个单一组件后，我们会发现，如果我们把每个组件都写到同一个HTML文件中，这是很糟糕的事情，这样做有缺点：

代码复用性差；（导致每次相同功能要重新写）

代码难维护；（因为一个文件会非常长）

影响性能；（打开每个页面都要重复加载很多）

为了解决这个问题，我们这里就要开始使用真正的组件化思维，将通用常用组件抽离出来，通过参数传递来控制组件的不同业务形态。
这便是我们接下来要写的主从组件。

思考一下，我们这里现在能抽成组件作为公共代码的，就是这个单个书本的内容，因为每个书本的内容都一致，只是里面数据的差异，于是我们再新建一个组件：

ng g component books

并将前面index.component.html中关于课本的代码剪切到books.component.html中来，然后删除掉*ngFor的内容，并将原本本地的变量books替换成list，这个变量我们等会会取到：




  {{list.id}}
  

    {{list.title}}
  

  
{{list.author}}

再将这个组件，引用到它的父组件中，这里是要引用到index.component.html的组件中，并将前面的*ngFor再次传入：

接下来要做的就是获取到list变量的值，显然这个值是要从外面组件传进来的，我们需要在books.component.ts引入前面定义的 Books类 和 @Input() 装饰器，还要添加一个带有 @Input() 装饰器的 list 属性，另外还要记得将getDetailImage方法也剪切过来：

// books.component.ts
import { Component, OnInit, Input } from "@angular/core";
import { Books } from "../books";

export class BooksComponent implements OnInit {
  @Input() list: Books;
  constructor() { }
  ngOnInit() {}
  getDetailImage(books){
    alert(`正在查看id为${books.id}的大图！`);
  }
}

@Input() 装饰器介绍具体可以查看 手册

我们要获取的 list 属性必须是一个带有 @Input() 装饰器的输入属性，因为外部的 IndexComponent 组件将会绑定到它。就像这样：

知识点：
[list]="item" 是 Angular 的属性绑定语法。这是一种单向数据绑定。从 IndexComponent 的 item 属性绑定到目标元素的 list 属性，并映射到了 BooksComponent 的 list 属性。

做到这里，我们已经将BooksComponent作为IndexComponent的子组件来引用了，在实际开发过程中，这样的父子组件关系，会用的非常多。

写到这里，看看我们项目，还是一样正常在运行，只是现在项目中组件分工更加明确了。

现在的效果图：

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787...
JS小册 js.pingan8787.com
微信公众号 前端自习课

GPU云服务器 云服务器 如何构建java项目 项目和数据库部署阿里云服务器 2021年新建数据中心项目用能指标 软件项目管理项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102027.html

相关文章

  • 【CuteJavaScript】Angular6入门项目（1.构建项目和创建路由）

    摘要：启动服务，并打开新窗口可简写创建新组件可简写创建新服务创建路由模块其他另外还有很多的命令提供，详细可以查阅官方文档命令。引入路由模块导出路由模块的指令这里需要添加一个数组，并传入，导出让路由器的相关指令可以在中的组件中使用。 本文目录 一、项目起步 二、编写路由组件 三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件 四、编写服务 1.为什么需要服务 2....

    bergwhite 评论0 收藏0

  • 【CuteJavaScript】Angular6入门项目（3.编写服务和引入RxJS）

    摘要：发布通过回调方法向发布事件。观察者一个回调函数的集合，它知道如何去监听由提供的值。 本文目录 一、项目起步 二、编写路由组件 三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件 四、编写服务 1.为什么需要服务 2.编写服务 五、引入RxJS 1.关于RxJS 2.引入RxJS 3.改造数据获取方式 六、改造组件 1.添...

    RebeccaZhong 评论0 收藏0

  • 【CuteJavaScript】Angular6入门项目（4.改造组件和添加HTTP服务）

    摘要：然后我们在父组件上添加事件监听，并传入本地的在对应的中添加方法再来，我们在子组件上多导入和，并添加修饰器和调用这样就实现了我们父子组件之间的事件传递啦，现在我们的页面还是正常运行，并且删除一条数据后，页面数据会更新。 本文目录 一、项目起步 二、编写路由组件 三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件 四、编写服务 1.为什么需要服务 ...

    BDEEFE 评论0 收藏0

  • 【CuteJavaScript】GraphQL真香入门教程

    摘要：最终代码省略其他输入类型用标识查询类型需要至少定义一个不要会不显示查询这里需要转成数组因为前面定义了返回值是类型相当于数据库的添加操作相当于数据库的更新操作省略其他现在我们可以启动服务器，在上测试下效果了。 showImg(https://segmentfault.com/img/remote/1460000019142304?w=893&h=438); 看完复联四，我整理了这份 Gr...

    bingo 评论0 收藏0

  • angular6入门之安装angular-cli

    摘要：由于之前安装的是的版本，需要卸载了，安装最新的版本。清除缓存，确保卸载干净具体参考安装最新版本安装成功后提示意思是版的需要版本最低，我之前的是的版本。先安装，去下载安装。在命令行输入检查是否安装成功。 最近听了大漠老师分享的angular6的讲解（附个链接大漠老师课程：http://www.ngfans.net/topic/2...），像是沙漠中发现了绿洲一样，决定好好学习一番，于是准...

    loonggg 评论0 收藏0

发表评论

登陆后可评论

0条评论

Lemon_95

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<