angular

最新文章

Angular 5升级到Angular 6

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

Angular HttpClient请求JSON和非JSON数据

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

Angular 6.0.0 break change:移除<template>标签

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

Angular 5 RouterLinkActive的用法

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

Angular 5滚动页面到顶部(scroll top)

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

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

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

Angular 5交换(重排)动态组件的位置

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

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

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

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

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

Angular4 监听路由URL的变化

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

Angular入口组件(entry component)和声明式组件的区别

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

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

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

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

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

Angular CLI在Angular项目里使用scss

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