angular ngoninit 刷新html页面_Angular聊天室angular+ngrx手机端APP聊天实例

之前有分享过 Vue 和 React 技术来实现聊天实例项目系列，这次给小伙伴们分享的是基于 Angular 技术来实现一个移动端聊天App实例。

简介

angular+angular-cli+angular-router+ngrx/store+rxjs等技术开发实现的仿微信app界面聊天室实例项目。实现了下拉刷新、右键菜单、发送消息、表情(动图)，图片、视频预览，红包打赏等功能。

https://angular.cn/

https://github.com/angular/angular

技术栈

• 框架技术：angular8.0 / @angular/cli

• 状态管理：@ngrx/store / rxjs

• 地址路由：@angular/router

• 弹窗组件：wcPop

• 打包工具：webpack 2.0

• 环境配置：node.js + cnpm

• 图片预览：previewImage

• 轮播组件：swiper

引入阿里Iconfont字体图标

https://www.iconfont.cn/

下载iconfont图标文件，解压放到angular资源目录下，如下图：解压到src/assets/fonts目录下

引入

// 在公共样式styles.css引入即可/* 导入公共样式 */@import './assets/fonts/iconfont.css';@import './assets/css/reset.css';@import './assets/css/layout.css';// 通过如下方式调用class=

效果图

主模板app.component.html

<div class="weChatIM__panel clearfix">    <div class="we__chatIM-wrapper flexbox flex__direction-column">                <header-bar>header-bar>                        <div class="wcim__container flex1">            <router-outlet>router-outlet>        div>                <tab-bar>tab-bar>    div>div>

angular页面后缀名为.ts，常见的页面写法有2种。

1、把html和css分离单独文件

import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  constructor(){}  ngOnInit(){    //...  }}

2、把html和css写在一个页面

import { Component, OnInit } from '@angular/core'@Component({    selector: 'app-root',    template: `      <div class="weChatIM__panel clearfix">        <div class="we__chatIM-wrapper flexbox flex__direction-column">                    <header-bar>header-bar>                              <div class="wcim__container flex1">            <router-outlet>router-outlet>          div>                      <tab-bar>tab-bar>        div>      div>    `,    styles: [``]})export class IndexComponent implements OnInit {    constructor(){}      ngOnInit(){    //...    }}

页面路由配置app-routing.module.ts

/* *  angular/router路由配置 */import { NgModule } from '@angular/core'import { Routes, RouterModule } from '@angular/router'// 引入路由验证import { Auth } from '../views/auth/auth'// 引入页面组件import { NotFoundComponent } from '../components/404'import { IndexComponent } from '../views/index'import { GroupChatComponent } from '../views/chat/group-chat'// ...export const routes: Routes = [  {    path: '', redirectTo: 'index', pathMatch: 'full',    data: { showHeader: true, showTabBar: true },  },    // 首页、联系人、我  {    path: 'index', component: IndexComponent, canActivate: [Auth],    data: { showHeader: true, showTabBar: true },  },    {    path: 'chat/group-chat', component: GroupChatComponent, canActivate: [Auth]  },  // 404  {    path: '**', component: NotFoundComponent,  },  // ...];@NgModule({  // imports: [RouterModule.forRoot(routes)],  imports: [RouterModule.forRoot(routes, { useHash: true })],  //开启hash模式  exports: [RouterModule],  providers: [Auth]})export class AppRoutingModule {}

angular是通过 ngrx/store 来进行状态管理。这里不作详细介绍，想了解用法去官网查阅资料。

https://ngrx.io/

https://github.com/ngrx/platform

Angular表单验证

export class LoginComponent implements OnInit {    private formField = {        tel: '',        pwd: ''    }    handleSubmit(){        let that = this        if(!this.formField.tel){            wcPop({ content: '手机号不能为空！', style: 'background:#eb5a5c;color:#fff;', time: 2 });        }else if(!checkTel(this.formField.tel)){            wcPop({ content: '手机号格式不正确！', style: 'background:#eb5a5c;color:#fff;', time: 2 });        }else if(!this.formField.pwd){            wcPop({ content: '密码不能为空！', style: 'background:#eb5a5c;color:#fff;', time: 2 });        }else{            this.store.dispatch(new actions.setToken(getToken(64)))            this.store.dispatch(new actions.setUser(this.formField.tel))            wcPop({                content: '登录成功，跳转中...', style: 'background:#378fe7;color:#fff;', time: 2, shadeClose: false,                end: function () {                    that.router.navigate(['/index'])                }            });        }    }}

END

ok，今天就分享到这里，希望能帮助到你。如果喜欢本文，可以点个「在看」，谢谢！