angular

每天积累一点
最新文章

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理，包括：cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例：新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

2017.10.09 03:02

[译]Angular构造函数与ngOnInit的本质区别

在Stackoverflow上最受欢迎的其中一个Angular问题是构造函数与ngOnInit的区别，这个问题已经超过了100k的浏览量。在那我回答了此问题，但还是决定在这篇文章展开说明。这个问题的大部分回答以及网络里的文章都是集中在两者在使用上的不同，这里我想给出一个比较全面的比较，挖掘组件初始化的过程。JS/TS语言相关的区别我们先从一个与语言本身有关的最明显的区别开始。ngOnInit只是一

2017.10.16 07:42

[译]Angular 5：升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布，它带来了一些新功能以及一些内部变化，这些会让Angular应用变得更小，执行变得更快。 在这篇文章中，我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息，请参阅公告博客帖子，有关所有更改的详细信息，请参阅官方更新日志。性能这是Angular 5包含的一些改变，它会让你的应用变得更

2017.11.16 10:19

Angular入口组件（entry component）和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件（entry component）是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

2017.12.22 15:09

Angular4 监听路由URL的变化

Angular 4检测路由变化，可以使用router.events来监听：支持的事件类型：NavigationStart：导航开始NavigationEnd：导航结束NavigationCancel：取消导航NavigationError：导航出错RoutesRecoginzed：路由已认证在判断事件类型需要导入对应的事件类型，如：import { Router,&n

2018.01.03 12:33

Angular 5获取当前的路由url及参数

获取当前加载组件的路由信息可以使用ActivatedRoute。ActivatedRoute接口如下：interface ActivatedRoute {    snapshot: ActivatedRouteSnapshot   url: Observable<UrlSegment[]> &nb

2018.03.29 04:33

Angular 5 给组件本身的标签添加样式class

在Angular 5给组件本身的标签添加样式有两种方法：方式一：使用@Component的host属性@Component({     selector : 'myComponent',     host : {     &nbs

2018.04.07 04:42

Angular 5交换（重排）动态组件的位置

如果忽略了angular的组件是由数据控制的特性，很容易陷入使用dom操作控制组件。最简单的方式是使用数组存放数据，通过重排数组中的元素的位置，从而达到重排组件的效果。示例：app.tsimport {Component, NgModule, VERSION} from '@angular/core'import {BrowserModule} from '@angular/platform-br

2018.04.18 08:33

angular cli配置路径别名替代webpack alias的方案

Angular cli内部是基于webpack实现构建项目：默认是没有webpack的配置文件webpack.config.js。部分与webpack相关的配置可以在.angular-ci.json中设置。如果需要定制的webpack.config.js，则需要使用eject命令发射出webpack.config.jswebpack alias可以让我们对路径设置别名，在模块之间引用是使用的是绝对

2018.04.25 01:58

Angular 5滚动页面到顶部（scroll top）

例如在文章页面组件PostComponent，对于的路由为/posts/:id。export class PostComponent implements OnInit { post$: Observable<Post>; private selectedId: number; constructor( private service: PostService, pr

2018.04.28 08:58

Angular 5 RouterLinkActive的用法

如果链接为当前路由（此时链接为激活状态），RouterLinkActive指令可以让我们给链接元素添加css的class样式。父路由连接激活默认情况下，当路由为链接的父路由或者完全匹配链接，链接都会认为是激活的状态。<a routerLink="/a/b" routerLinkActive="active">B链接</a>所以，示例里当路由为“/a”和“/a/b”class

2018.05.03 03:19

Angular 6.0.0 break change：移除&lt;template&gt;标签

为了避免冲突，Angular v4废弃了<template>标签。Angular 6.0.0则正式移除了<template>标签，<template>标签需要使用<ng-template>替换。Angular 4在tsconfig.json提供了angularCompilerOptions的编译选项enableLegacyTemplate来兼容<

2018.05.04 02:46

Angular HttpClient请求JSON和非JSON数据

从Angular 4开始，Angular的http请求改用HttpClient。添加HttpClientModule首先需要引入HttpClientModule，它需要放在BrowserModule后：import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platfor

2018.05.05 09:55

Angular 5升级到Angular 6

Angular升级建议先到https://update.angular.io，它会根据你选择的原Angular和目标Angular版本给出一些升级建议。Angular 5升级到Angular 6升级前1、如果项目中有用到HttpModule和Http Service，把它们切换到HttpClientModule和HttpClient Service。HttpClient有几个特性：不需要调用.js

2018.05.06 07:15

Angular文件上传示例

以下为Angular的文件上传示例，分为三个步骤。步骤一、创建HTML模板 (file-upload.component.html)简单的创建一个类型为file的input标签，input上添加change事件，用来监控文件的选择。<div class="form-group"> <label for="file">Choose File</label>

2020.03.17 14:27

Angular集成moment.js使用

moment.js是一个专门用于处理时间的包。可以通过下面的方法把moment.js集成到Angular中使用。一、使用npm安装moment.jsnpm install --save moment二、在使用moment.js的.ts文件中导入import * as moment from 'moment'; 三、使用moment.jsmyDate = moment(someDate).

2020.03.30 13:39

Angluar 11集成CkEditor 5

CkEditor 5提供了5种即用型的编辑器，分别是Classic editorInline editorBalloon editorBalloon block editorDocument editor版本说明CkeEditor 5也提供可Angular的Component，npm包是ckeditor5-angular，分为两个主版本：版本 1.x.x ：适用于 Angular 5-8。Angu

2021.10.01 15:46

Angular使用keydown监听tab键事件处理

在html中，在焦点元素上按下tab键，它会跳到下一个可聚焦元素（按钮、输入等）。如果监听的是keyup，当按下tab放开时，焦点元素已经变为下一个可聚焦元素。在前面的焦点元素上做监听keyup是不会触发事件的处理handler的。为了避免焦点元素的变化这个问题，可以使用keydown监听tab键。Angular监听tab键示例示例：<input (keydown.Tab)="onKey($

2021.12.08 09:17

Angular Component组件的生命周期-ngOnChanges，ngOnInit

Angular Component组件的生命周期按时间次序可以分为以下阶段：组件的生命周期是从Angular 实例化组件开始接着渲染组件的视图以及子组件视图完成组件视图渲染后，Angular仍然会检测组件的变化，主要包括检测绑定属性的变化（change detect）根据检测到的变化，如果有必要，则更新组件和它的子组件Component组件生命周期结束最终是销毁组件，以及从DOM中移除组件的模板有

2021.12.12 12:22

Angular Component组件的生命周期-ngDoCheck

在Angular Component组件的生命周期（一）知道，ngOnChanges只能用于检测Component组件绑定的@Input属性的赋值和重置，并不能检测组件发生的任何变化。其中一个例子是：let user:User = new User("张三"); user.name = “李四”;当父组件向子组件的@Input属性传递的是一个User对象，但父组件是通过user.name来修改对象

2021.12.16 14:40

Angular指令ngFor和ngForOf

NgForOf指令ngFor和ngForOf都是指令NgForOf的selector。定义如下：@Directive({selector: '[ngFor][ngForOf]'}) export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {

2021.12.19 03:37

Angular指令ngIf用法详解

HTML是没有条件控制的语言，如果要根据某变量的值显示或隐藏某个DOM元素，往往需要结合JavaScript的if-else表达式来控制。Angular ngIf就可以增强Html这方面的能力。ngIf接受一个表达式作为值，并且强制把表达式计算出的值转换为Boolean类型，如果值为true，则在DOM中渲染模板，如果值为false则不渲染ngIf所在的模板。示例：<div class="c

2021.12.24 15:33

在Angular Router中使用查询参数QueryParameter

会涉及到的api有：Angular Router ，RouterLink 和 ActivatedRoute。在Router.navigate中使用查询参数单参数如果使用 Router.navigate 路由，navigate提供了queryParams 用作查询参数传递。toProducts() { this.router.navigate( ['/products'], {

2021.12.28 14:38

Angular装饰器——Decorators

最近有空学习了一下angular的基础知识，对于angular的装饰器有了一些理解。其实装饰器并非angular特有的，它是Typescript的语言特性。首先我们看看什么是装饰器  我们先看看Typescript官方的说明：装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必

2022.01.13 07:33

Angular依赖注入注解inject()和注解@Inject

注解@InjectAngular提供了注解@Inject来向组件或服务注入实例，例如：@Injectable() class AService{ constructor(@Inject(BService) bService:BService) { } }这等同于添加访问修饰符后去掉注解，这也是我们常用的方式，上面示例可改为：@Injectable() class AService{

2022.06.15 01:48