青颜的天空的博客

Angular CLI 创建的项目可以选择css的预处理 less 作为 style 文件的默认预处理格式。less 可以设置变量，函数，同时使用继承，混入等方法达到更方便，通用的效果。通常情况下，我们会设计一些通用的变量在各个地方使用，如何将通用变量的文件一次引入，全局使用呢？笔者在assess目录下有一个less的变量文件src/assets/less/variables.less@app-amber: #f9b551;@title-ml: 8px;@table-border-c: #e1e

最近在升级公司的Angular项目，项目使用Angular-Cli搭建，UI使用Angular Metarial库和懒加载路由，Angular版本由v10升级到v13。升级指导：https://update.angular.io/问题：升级之后ng serve编译非常慢仅仅启动都要用到90s+开发过程中的重构时间也变长了，任何一个小的改动，哪怕仅仅是文字或者样式的改动都要重新编译，并且耗时10s+到40s不等一顿操作猛如虎，一看战绩零杠五，这样肯定不行嘚，会大大降低开发的效率。谷歌一下才发现.

我有一个组件，其模板如下所示:<div [my-custom-directive]>Some content here</div>需要访问 MyCustomDirective这里使用的类实例。当我想访问子组件时，我使用 ViewChild查询。是否有等效的功能来访问子指令？答案当然是可以的：方法1：可以使用 exportAs @Directive 的属性(property)注释。它导出要在父 View 中使用的指令。从父 View ，您可以将其绑定(bind)到 View

angular项目中要以变量的形式，外部引入src,结果报错如下：1.导入DomSanitizerimport { DomSanitizer} from ‘@angular/platform-browser’;2.引用DomSanitizer，并转换url

对于 Angular 项目，推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。对许多项目的常见依赖项是日期库moment.js 。 这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。一、ngx-build-plus 建立额外配置这里推荐一个工具库ngx-build-plus，不需要改很多东西

Angular2+中的的内容映射使用的是ng-content指令，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件。下面用例子来解释一下ng-content的用法:app.component.ts<parent-content> <child-content></child-content></parent-content>可以把被包含的组件称为子组件，外层称为父组件。我们看下父组件怎么写的:parent-content.compone

1.通过输入型绑定把数据从父组件传到子组件child.component.tsexport class ChildComponent implements OnInit { @Input() hero: any; @Input('master') masterName: string; // 第二个 @Input 为子组件的属性名 masterName 指定一个别名 master constructor() { } ngOnInit(): void { }}ch

Angular中文官网：https://angular.cn/guide/quickstart本博客旨在介绍在本地开发环境中使用 Angular CLI 工具来构建并运行一个简单的 Angular 应用先决条件在开始之前，请确保你的开发环境已经包含了 Node.js® 和 npm 包管理器。Node.jsAngular 需要 Node.js 的 8.x 或 10.x 版本。要想检查你的版本，请在终端/控制台窗口中运行 node -v 命令。要想安装 Node.js，请访问 nodejs.or

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。接下来我们将按照以下目录的内容，介绍 Angular 的路由。目录Installing the routerBase hrefUsing the routerRouterModule.forRootRouterModule.forChildConfiguring a routeDisplaying routesFuther

【问题描述】当使用TypeScript和process时，我的规范会失败，出现如下错误消息:并且我已经在package.json文件中已经添加了@types/node类库解决办法：在tsconfig.json中配置// tsconfig.json{ "compilerOptions": { "types": [] }}改为// tsconfig.json{ "compilerOptions": { // "types": [] }}或者改为：/

使用 innerText 方式document.titleJqueryAngular Title Service 等方法设置页面的标题

1. vs code中报错原因是 TsLint 代码缩进不允许使用 Tab，要打空格，而我们代码格式化的时候，就会出现这个错误，在项目找到tslint.json文件加上这个配置就好了 "indent": [ true, "tabs", 4 ],2. 在WebStorm中报错若修改????的 tslint.json仍不可行，一般需要配置：...

【问题描述】：Angular10项目本地运行出现如下错误：【原因】：本地hosts文件中没有这个映射【解决办法】：在本地hosts文件中添加这个映射127.0.0.1 xxx.cn在Mac下更改hosts文件的办法请戳这里...

项目中经常需要这样的功能：对每个http请求的请求参数和响应数据进行拦截，比如统一在headers中添加 authorization的权限验证、在响应之后统一处理返回的错误：401提示用户"您的登录信息已过期，请重新登录"。想想如果我们要在每个接口中都分别做处理，这将是多么可怕的工作量。所以我们需要用到拦截器，顾名思义：拦截每一次你的请求和响应，然后进行相应的处理。当然这不用拦截器你或许也可以完成上述这功能，但是会很麻烦而且代码会产生大量重复。笔者一直使用TypeScript从事Angular项目开发，

Angular 属性型指令会监听并修改其它 HTML 元素和组件的行为、Attribute 和 Property。 它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令。

公司有项目用的是Angular Metarial风格，一直想给其中的mat-select组件添加搜索功能，偶然遇到ngx-mat-select-search库基本满足需求，又能够保留原有的mat-select风格，特此记录用法。安装：yarn add ngx-mat-select-search用法一（list数据源已请求在本地）：<mat-form-field class="w-100"> <mat-select formControlName="title

Angular中极好的一点就是表单，使用ReactiveForms可以方便快捷得进行表单验证。定义一个表单提交表单时需要取出表单中的数据

问题描述：Angular项目中使用了socketio-client库，{ "dependencies": { ... "@feathersjs/socketio-client": "^4.4.3", ... },}使用：import socketio from '@feathersjs/socketio-client'@Injectable()export class Socket { public socket: SocketIOClient.So

问题描述：这几天升级公司的一个Angular项目，把Angular更新到最新的10.0.1版本。{ "dependencies": { "@angular/animations": "^10.0.1", "@angular/cdk": "^10.0.1", "@angular/common": "~10.0.1", "@angular/compiler": "~10.0.1", "@angular/core": "~10.0.1", "@angul

这几天升级公司的一个Angular项目，把Angular更新到最新的10.0.1版本。"dependencies": { "@angular/animations": "^10.0.1", "@angular/cdk": "^10.0.1", "@angular/common": "~10.0.1", "@angular/compiler": "~10.0.1", "@angular/core": "~10.0.1", "@angular/forms": "~10.0.1",

项目中经常需要用到富文本组件，我使用的一个轻量级的富文本组件是Trumbowyg，压缩后文件很小。编辑文本后，显示也是一个问题。一段文字在轻量级文本编辑器中展示如下：在ts中模拟此富文本：import {Component, OnInit} from '@angular/core'@Component({ selector: 'app-inner-html', templateUrl: './inner-html.component.html', styleUrls: ['./in.

RouterAngular在组件销毁时并没有取消router的所有订阅事件，同样是延迟10秒，可以看到请求依然是会发出的。’ngOnInit() { this.subscription = this.router.queryParamMap.delay(10000).subscribe((param) => { this.user.getUser(+param.get(id)) }) } ngOnDestroy() { this.subscript.

命令： ng build --prod --build-optimizer--build--optimizer // 编译后进一步压缩文件的大小 ```若出错，有可能node内存不够，解决办法：使用node --max-old-space-size=100000000 node_modules/@angular/cli/bin/ng build --prod --build-optimizer把angular.json 中的budgets属性中的maximumWarning和maximumEr.

有时候页面搜索的时候，搜索框出来后希望输入框自动聚焦<input type="text" id="searchInput" [(ngModel)]="search.keyword" *ngIf="show" placeholder="输入关键字搜索" autofocus (keyup)="myKeyup($event)">却发现这样只能第一次的时候自动聚焦，以后就不可以了。后来又尝试了autoFocus directive的方法，设置聚焦必须在ngAfterV

HTML：<button type="button" class="copy" (click)="copyToClip('你好')">复制</button>TS：/** * @desc 复制纯文本到剪贴板 * @param word - 纯文本 */copyToClip(word) { const input = document.createElement('input') input.setAttribute('readonly', 'readonly')

项目中用到了富文本编辑器， 编辑器把样式都返回在了P标签的style中，例如<p style="font-size: 20px;color: #00acc1;line-height: 18px;"> <span style="font-size: 18px;color: #64c159;font-weight: bold"></span> </p>不幸的是，当我把这段内容赋值给一个div的innerHtml时，结果什么样还是什么样，还有的样式

有条件的进行必填项验证 conditional required项目中需要使用有条件的必填项验证默认用法<textarea placeholder="请输入..." [(ngModel)]="item.summary" minRows="1" maxRows="2" cols="30" name="summary" #summary="ngModel" required></textarea>条件用法<texta.

自己写的angular路由复用，用着基本挺好。// simple-reuse-strategy.tsimport {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router'import Debug from './debug.service'import {ComponentRef} from '@angular/core'export class SimpleReuseStra