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) 浏览(7473)

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

2020-6-17 Jon angular

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

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

// parent.component.html

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

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

评论(0) 浏览(3366)

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) 浏览(3664)

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) 浏览(3065)

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

2020-5-17 Jon angular

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

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

评论(0) 浏览(4830)

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

2020-5-12 Jon angular

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

标签: angular http 请求拦截器 interceptor

评论(0) 浏览(3826)

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) 浏览(6157)

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

2020-4-29 Jon angular

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

标签: angular 指令 input 空格

评论(0) 浏览(4156)

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) 浏览(4034)

jQuery和单页应用中折叠菜单互不影响的实现对比

2020-2-18 Jon js+jquery+ajax

jquery 折叠菜单互不影响的实现直接操作 dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titlejquery 折叠菜单互不影响的实现直接操作 dom</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">

标签: jquery angular 单页应用折叠菜单

评论(0) 浏览(3168)

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) 浏览(3548)

angular 中的路由简单的配置详解

2019-4-21 Jon js库

1.重定向路由配置 const routes: Routes = [ {path:'', redirectTo: '/home', pathMatch:'full'}, {path:'home', component: HomeComponent }, // 默认展示HomeComponnet {path:'about', component: AboutComponent} ]; 作用就是可以指定访问某个路由时跳转到其它路由，如上述所示当访问的是根路由时则直接重定向到home路由，展示HomeComponent组件的内容。 pathMatch: 'full'表示全部符合才...

标签: angular

评论(0) 浏览(2685)

Angular 模块懒加载和预加载策略

2018-6-12 Jon js库

angular2及以上提供了两个非常实用的特性：懒加载和预加载一、理论 1. 什么是懒加载？懒加载也叫延迟加载，在访问到这个模块的时候，Angular才会加载这个模块。 2. 为什么要使用懒加载？我们知道一个项目做得比较大的时候，模块组件比较多的时候，代码的体积也就相应增加，执行时间相应延长，这样会使得页面首次打开加载时长增大，用户体验下降。使用懒加载可以很好地解决这个问题，让开始只加载需要用户需要的代码，后续用户交互时再加载对应的代码，可以大幅提升首屏用户体验，让用户感觉到首屏很快，但是随之带了的是用户第一次去查看懒加载模块时，这个时候懒加载模块菜开始加载，会有个加载等待的延...

标签: angular

评论(0) 浏览(3574)

angular 如何在打包发布时清除console信息

2018-5-28 Jon js库

问题 console一般是我们开发时用于测试打印到控制台的数据以便我们调试程序当项目打包上线时这些console已然无用这个时候还在控制台打印出来如果打印的是一些敏感信息就没那么安全了并且还会影响美观我们如果只是简单的查找代码中的console并删除会有几个问题 1、工作量比较大（如果你使用console多的话） 2、如果你使用了一些插件，那么插件中的console删起来比较繁琐 3、如果后期想要开发环境上再次打印，则又要重复写和删分析那么既然我们开发环境需要而生产环境不需要那么我们可以通过判断当前环境是开发还是生产从...

标签: angular

评论(0) 浏览(3139)

基于angular-cli配置代理解决跨域请求问题

2017-10-11 Jon js库

1.跨域请求产生随着不同终端(Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开发效率，前后端分离的需求越来越被重视，后端负责业务/数据接口，前端负责展现/交互逻辑，同一份数据接口，我们可以定制开发多个版本。而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下，进而会产生跨域问题。 2.通用解决方案如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。&nbs...

标签: angular

评论(0) 浏览(3027)

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱：13515678147@163.com Powered by emlog sitemap