Angular 通过路由页面导航

因为Angular是单页面应用,不能用传统的文件目录跳转,需要使用路由器。

路由配置

配置路由有两种方式:

  1. 在创建项目或初始化项目时,使用--routing参数,例如:

    ng new angular --routing
    项目创建时会自动生成app-routing.module.ts:

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    const routes: Routes = [
      {
        path: '',
        children: []
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: []
    })
    export class AppRoutingModule { }
    

    并且app.module.ts自动加上 AppRoutingModule

    入口组件模板 app.component.html自动加上<router-outlet></router-outlet>标签

  2. 手工处理上面的步骤

    当URL匹配时,Angular会把相应的组件,插到router-outlet位置。

Continue reading “Angular 通过路由页面导航” »

Angular2 自定义指令

Angular的指令分为三种:

  1. 属性指令

    属性指令指的是以属性形式使用的指令,如NgClass,NgStyle,FormsModule里的NgModel,NgModelGroup等。

  2. 结构指令

    结构指令用于修改DOM结构,如NgIf,当条件为true时,该元素会被添加到DOM中。

  3. 组件

    这个不必说了,我们用得最多的便是组件。与其他指令不同,它描述的是一个视图,是用户可以直接看到的东西。

    Continue reading “Angular2 自定义指令” »

Angular2 使用管道Pipe以及自定义管道格式数据

管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联。

纯管道(Pure Pipe)与非纯管道(Impure Pipe)

管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下,管道都是纯的,在自定义管道声明时把pure标志置为false,就是非纯管道。如:

@Pipe({
  name: 'sexReform',
  pure:false
})

Continue reading “Angular2 使用管道Pipe以及自定义管道格式数据” »

Angular2 模板语法数据绑定

Angular2的模板语法大体上与html一致,功能上增加了数据绑定以及一些控制dom的小功能。
数据绑定主要有以下几种:
1. 插值绑定
2. property绑定
3. attribute绑定
4. class绑定
5. style绑定
6. 事件绑定
7. 局部变量绑定
8. ngModel
9. ngSwitch
10. ngFor
11. ngForTrackBy

其他功能:
1. 管道操作符
2. 安全导航操作符
3. others…

Continue reading “Angular2 模板语法数据绑定” »