
Angular实战
BananaScript
上至前后端人工智能,下至嵌入式树莓派,无所不能的IT全栈
展开
-
【Angular实战/网易云】轮播图
一. 选择正确的组件库选用正确的组件库能让你的开发事半功倍,material里面是没有carousel的,所以我选择ng-zorro。ng-zorro中的nz-carousel已经非常好了,但是我这里还是选择封装一下。二. 封装nz-carousel我主要是想给原来的轮播图加上左(<)右(>)两个按钮,同时切换的dot也得变一下。我们可以写一个新的组件,使用这个组件的时候把<nz-carousel>嵌套在内部,在实现这个组件的时候,使用<ng-cont.原创 2020-08-21 15:59:27 · 1079 阅读 · 0 评论 -
【Angular实战/网易云】验证码注册
一. 模板内容思路如下:先让用户输入自己的手机号和密码,然后点击注册按钮跳转到输入验证码的界面。 在验证码的界面输入正确的验证码之后,点击注册即可成功注册。按照这个思路,“输入手机号和密码”视图以及“输入验证码”视图是两个完全不同的视图,需要用两个组件来实现。但是,当用户输入完验证码以后,我们需要拿着用户之前输入的手机号和验证码发送到后台,看看这个验证码是否正确。所以我们需要组件之间的数据通信,这个如果要靠非父子组件来实现稍微啰嗦了一点,又要往store里面加入新的内容。所以我们把注..原创 2020-08-21 14:08:16 · 622 阅读 · 0 评论 -
【Angular实战/网易云】用户签到(interceptor使用)
一. 用户签到的难点为什么这么简单的东西也要单独拿出来讲一讲?主要还是跨域的问题。如果不考虑跨域的话,只要给click绑定以下事件就行了: onSignin() { this.memberSerice.signIn().subscribe( res => console.log(res), error => console.log(error) ); }但是大家都知道,http是无状态的,如果人家没给你一个标识符,人家就无法认出你。原创 2020-08-20 19:03:21 · 246 阅读 · 0 评论 -
【Angular实战/网易云】登录组件
一. 表单的基础知识<form>和</form>之间包裹起来的内容就是表单。其中,内部的<input>啊,<button>啊,<textarea>这些,都叫做表单控件。其中<button>的默认type为submit,这个意味着你点击这个button就会自动帮你提交,你如果强行绑定(click)事件就会引发错误。相似的type还有reset, 这个也不能绑定事件。二. ng-zorro表单这里我使用的框架是ng.原创 2020-08-20 17:20:53 · 360 阅读 · 1 评论 -
【Angular实战/网易云】模态框(二)
之前的内容我们已经简单介绍了如何生成模态框,以及用状态管理插件管理状态,并把批量的action封装成service。下面我们正式来给我们的模态框添加特性。一. ESC键退出简单地来说就是监听键盘上的keydown事件,如果keyCode对应的是ESC键,那就隐藏模态框。 private createOverlay() { this.overlayRef = this.overlay.create(); this.overlayRef.overlayElement.append原创 2020-08-20 16:25:32 · 352 阅读 · 0 评论 -
【Angular实战/网易云】模态框(一)
一. 生成模态框当用户点击登陆或者注册的时候,就会跳出来一个对话框,要求用户输入用户名和密码等信息。这个对话框说专业点就是模态框,要生成这个模态框我们得借助Overlay实例,这个之前在讲解搜索组件的时候已经提到过了。 private createOverlay() { this.overlayRef = this.overlay.create(); this.overlayRef.overlayElement.appendChild(this.elementRef.na原创 2020-08-20 15:57:18 · 683 阅读 · 0 评论 -
【Angular实战/网易云】搜索组件
一. 显示和隐藏搜索组件显示搜索组件就是在原来的界面上又跳出一个新的组件,这个可以用material cdk中的overlay来实现。简单地来说就是:用注入的Overlay实例的create方法创建OverlayRef实例。 利用ComponentPortal创建动态组件,赋值给panelPortal对象。 最后把panelPortal和overlayRef用attach方法结合起来。 showOverlayPanel() { this.hideOverlayPanel();原创 2020-08-20 11:39:52 · 430 阅读 · 0 评论