路由：

调用路由模块

import { NgModule }             from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

 

设置子路由

{ path: 'home',  component: HomeComponent ,children:childRoutes},

 

const childRoutes : Routes=[

  { path: '', redirectTo: 'index', pathMatch: 'full' },

  { path: 'index',  component: IndexComponent }

]

 

在需要跳路由的标签加上属性 routerLink="home"

在需要加载路由的界面添加标签 <router-outlet></router-outlet>

路由跳转

(这个跳转的方法，资源不会调用)

this.router.navigateByUrl("/home");

 

激活（路由链接为活动状态）时绑定一个css样式

routerLinkActive="active"

 

模块：

在ts中模块的基本结构如下：

import { Component } from '@angular/core';

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html'

})

export class HomeComponent {

}

 

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'my-home',

  templateUrl: './home.component.html'

})

export class HomeComponent implements OnInit{

  ngOnInit(): void {

  }

}

 

路径：

获取路径（/home/index）

path:Location;

constructor(location: Location) {

  this.path = location;

}

 

调用接口

return this.http.get('http://localhost:81/angular.php')

 .map(response => response.json()).subscribe(data=>{

 this.res = data.res;

})

 

显示：

相当于遍历数组

 *ngFor="let lang of langs"

 

条件判断

 *ngIf="langs.length>3"

 

添加点击事件

 (click)="onClickMe()"

 

通过box模块来绑定当前元素，然后获取value值

 #box (keyup)="onKey2(box.value)"

 

绑定回车事件

 #box (keyup.enter)="value3=box.value"

 

绑定失焦事件

(blur)="value4=box.value"