Angular12 路由复用策略规则编写及使用

2021-7-8 Jon angular

Angular12 路由复用策略规则编写及使用 1. 路由复用策略服务 route-reuse.service.ts import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router'; import { ComponentRef, Injectable } from '@angular/core'; @Injectable() export class RouteReuseService implements RouteReuseStrategy

阅读全文>>

标签: angular router esue

评论(13) 浏览(7792)

Angular 组件通讯父子组件通讯和中间人模式（通过服务通讯）

2020-6-17 Jon angular

angular 是组件化的框架，通过一个个组件来构成整个项目，所以组件之间的通讯是必不可少的，下面就分别说下父子组件通讯和中间人模式通讯的使用。

组件通讯之父子组件之间通讯

// parent.component.html

<h1>父组件</h1> <app-child [value]="value" (valueEvent)="onValueEvent($event)"></app-child>

阅读全文>>

标签: angular 组件 组件通讯 父子组件 服务 中间人

评论(0) 浏览(3449)

Angular 中正确使用 cesium 开发地球插件的步骤

2020-5-27 Jon angular

安装 cesium 依赖 yarn add angular-cesium cesium 导入并添加 AngularCesiumModule 到你的应用模块 // Angular Cesium import { AngularCesiumModule } from 'angular-cesium'; // .... @NgModule({ // ... imports: [ // ... AngularCesiumModule.forRoot() ] // ... }) 在 angular.json (角> = 6)文件添加 cesium 资源

阅读全文>>

标签: angular cesium cesium插件 cesium使用 angular-cesium 地球

评论(0) 浏览(3742)

Angular 显示后端返回的 html 安全转换的管道

2020-5-25 Jon angular

核心代码 管道 ts 代码 import {Pipe, PipeTransform} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'safeHtml' }) export class SafeHtmlPipe implements PipeTransform { constructor(private sanitized: DomSanitizer) {}

阅读全文>>

标签: html angular 管道 pipe safe safeHtml

评论(0) 浏览(3140)

Angular 中使用 rxjs 定时请求根据异步请求返回后按间隔定时请求

2020-5-17 Jon angular

某需求需要定时发送请求获取最新数据，最简单的是用 setInterval 但是异步请求数据到返回也是需要消耗时间的，这就会导致可能接口还没返回数据，又重复发了请求。更加准确的做法是每次发送请求响应后再开始计时，而使用 rxjs 来做是非常方便的，下面看具体代码。

阅读全文>>

标签: angular 请求 rxjs async request 异步 定时 间隔 响应

评论(0) 浏览(4915)

Angular 自定义一个简单的http请求拦截器

2020-5-12 Jon angular

请求拦截器，用于实现对http请求和响应的处理、监视，比如：请求头的设置、接口数据缓存、响应的处理。下面就做一个简单的请求拦截后给请求头加 token 和设置缓存控制。1. 创建一个拦截器 ng g interceptor interceptor/request

阅读全文>>

标签: angular http 请求 拦截器 interceptor

评论(0) 浏览(3896)

Angular 给展示的数字添加一个数字格式千分位管道

2020-5-5 Jon angular

最终效果 242 => 242 369511 => 369,511 41262132 => 41,262,132 6456122331 => 6,456,122,331 在共享模块 shared 模块中创建数字管道 ng g p shared/pipe/number-format 在 shared 模块中导出管道

阅读全文>>

标签: angular 管道 数字 千分位 pipe

评论(4) 浏览(6261)

Angular 给 input 添加一个去除两边空格指令

2020-4-29 Jon angular

一般遇到 input 提交内容都会逐个给里面的值去除空格，这是一个重复的劳动力，在 Angular 中可以通过自定义一个指令来解决。考虑到项目中会有多个组件用到，所以一般会将该指令放到 shared 模块下面，下面简单写下步骤。

阅读全文>>

标签: angular 指令 input 空格

评论(0) 浏览(4234)

Angular 9.1.0 线上报错 ReferenceError: _rollupMoment__default is not defined

2020-4-26 Jon angular

原因分析

原因是 angular material 中依赖的时间插件 Moment 和 @angular-devkit/build-angular@0.901.1。 之间的版本问题

解决办法

一、 angular 版本升级到 9.1.1 即可解决

二、 通过配置解决

阅读全文>>

标签: angular material _rollupMoment__default moment

评论(1) 浏览(4104)

angular配置全局路由跳转不添加到历史记录之曲线救国

2019-10-13 Jon angular

在开发angular项目中遇到一个需求是路由跳转不记录在浏览器历史中，即使用浏览器回退时不会退到进入当前页面的前一个页面，而是退到前前一个页面。 这个其实很简单，在angular也给出了相应的解决方案即 1.如果跳转发生在html中即使用routerLink时加上replaceUrl="true"即可 <button routerLink="/order" replaceUrl="true">to order</button> 2.如果跳转发生在ts中即 this.router.navigate(['/order'], { replaceUrl: true });...

阅读全文>>

评论(1) 浏览(5130)

angular回掉函数里数据修改视图不更新的问题解决

2019-10-6 Jon angular

做angular项目中有时会遇到组件中的数据变化后视图中没有更新的问题 问题出现的场景： 可能是项目存在已久代码已不知所云、或者是陷入某个回调函数中、又或是使用了某个插件后。 先看下angular的变更检测策略： Default ：ng提供的Default的检测策略，只要组件的input发生改变，就触发检测； OnPush ：OnPush检测策略是input发生改变，并不立即触发检测，而是输入的引用发生变化时，才会触发检测。 ChangeDetectorRef.detectChanges()：可显式的控制变更检测，在需要的地方使用即可； NgZone.run()：在整个应用...

阅读全文>>

评论(0) 浏览(5437)

deployUrl解决angular项目打包后静态资源的部署到其它目录的问题

2019-9-14 Jon angular

通常angular 打包后里面的css、js文件放到了别的服务器，或者放到了别的目录 1、当前服务器aaa.com index放到了aaa.com下面，css/js文件放到了bbb.com下面 2、当前服务器aaa.com index放到了aaa.com下面，css/js放到了aaa.com/public/下面 最简单的办法就是将打包好的index.html里面的资源前面设置为对应的绝对路径和相对路径即可。 那么当遇到项目中有懒加载和预加载摸模块文件时，这些文件不直接在index中引用，而是通过runtime.**.js中引用 这时问题就会出现，部署上后发现懒加载模块文件报4...

阅读全文>>

评论(0) 浏览(10860)

angular 打包后运行报错Attempting to attach an unknown Portal type

2019-6-5 Jon angular

angular 打包后运行报错Attempting to attach an unknown Portal type & 以及查看包大小 报错详情 ERROR Error: Attempting to attach an unknown Portal type. BasePortalHost accepts either a ComponentPortal or a TemplatePortal. ng serve 没有问题 ng build --prod 出现问题 ng serve --prod 出现问题 问题原因    &nb...

阅读全文>>

标签: angular

评论(0) 浏览(3650)