Angular从入门到实战

Angular从入门到实战

---

Mock Rest API

  json-server：用于快速搭建REST API的利器

• 安装：npm i -g json-server
• 启动：json-server /json文件位于的目录/blablabla.json

一、安装Angular

1、安装前准备工作：

1.1、安装nodejs

  安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本

1.2、安装cnpm

  npm可能安装失败建议先用npm安装一下cnpm用淘宝镜像安装

# https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

2、使用 npm/cnpm 命令安装angular/cli （只需要安装一次）

npm install -g @angular/cli     或者    cnpm install -g @angular/cli

二、创建项目

ng new taskmgr --skip-install --style=scss

• 进入项目安装依赖

  npm install 或者 cnpm install
  

• 创建module

  ng g m name
  

• 创建component

  ng g c name--spec=false
  

  使用组件 <app-header></app-header>

三、angular 组件以及组件里面的模板

3.1、创建 angualr 组件

• 创建组件：ng g component components/header
• 使用组件 ：<app-header></app-header>

3.2、Angular 绑定数据

• 1.数据文本绑定 {{}}

  <h1> {{title}} </h1>
  <div> 1+1={{1+1}} </div>
  

• 2.绑定 html

  this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
  
  <div [innerHTML]="h"></div>
  

3.3、绑定属性

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

3.4、数据循环 *ngFor

• 1.*ngFor 普通循环

  <ul> 
  	<li *ngFor="let item of list"> {{item}} </li> 
  </ul>
  

• 2.循环的时候设置 key

  <ul>
  	<li *ngFor="let item of list;let i = index;">{{item}}--{{i}}</li> 
  </ul>
  

• 3.template 循环数据

  <ul> <li template="ngFor let item of list"> {{item}} </li> </ul>
  

3.5、条件判断 *ngIf

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

3.6、*ngSwitch

<ul [ngSwitch]="score">
	<li *ngSwitchCase="1">已支付</li> 
	<li *ngSwitchCase="2">订单已经确认</li> 
	<li *ngSwitchCase="3">已发货</li> 
	<li *ngSwitchDefault>无效</li> 
</ul>

3.7、执行事件 (click)=”getData()”

<button class="button" (click)="getData()"> 点击按钮触发事件 </button>
<button class="button" (click)="setData()"> 点击按钮设置数据 </button>

/*自定义方法获取数据*/ 
getData(){
	 // 获取 
	 alert(this.msg);
} 
setData(){ 
	// 设置值 
	this.msg='这是设置的值'; 
}

3.8、表单事件

<input type="text" (keyup)="keyUpFn($event)"/>

keyUpFn(e){
	console.log(e) 
}

3.9、双向数据绑定

# 注意引入：FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({ 
	declarations: [ 
		AppComponent, 
		HeaderComponent, 
		FooterComponent, 
		NewsComponent 
	], 
	imports: [ BrowserModule, FormsModule ], 
	providers: [],
	bootstrap: [AppComponent] 
}) 
export class AppModule { }

# 使用：
<input type="text" [(ngModel)]="inputValue"/>

{{inputValue}}

3.10、[ngClass]、[ngStyle]

# [ngClass]:
<div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div </div>

public flag=false; 
<div [ngClass]="{'red': flag, 'blue': !flag}"> 这是一个 div </div>

public arr = [1, 3, 4, 5, 6]; 
<ul>
	<li *ngFor="let item of arr, let i = index"> 
		<span [ngClass]="{'red': i==0}">{{item}}</span> 
	</li>
</ul>

# [ngStyle]:
<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

public attr='red'; 
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

3.11、管道

public today=new Date();
<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其他管道：

http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34

四、Angular 表单 input、checkbox、radio、 select、 textarea (实现人员登记)

• form.component.html

<h2>人员登记系统</h2>
<div class="people_list">
  <ul>
    <li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li>
    <li>性 别：
      <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label>　　　
      <input type="radio" value="2" name="sex"  id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">女 </label>
    </li>
   <li>
    城 市：
      <select name="city" id="city" [(ngModel)]="peopleInfo.city">
          <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
      </select>
    </li>
    <li>
        爱 好：
        <span *ngFor="let item of peopleInfo.hobby;let key=index;">
            <input type="checkbox"  [id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label>&nbsp;&nbsp;
        </span>
     </li>

     <li>
       备 注：
       <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
     </li>
  </ul>
  <button (click)="doSubmit()" class="submit">获取表单的内容</button>
  <br>
  <pre>
    {{peopleInfo | json}}
  </pre>
</div>

• form.component.ts

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {

  public peopleInfo:any={
    username:'',
    sex:'2',
    cityList:['北京','上海','深圳'],
    city:'上海',
    hobby:[{
          title:'吃饭',
          checked:false
      },{
            title:'睡觉',
            checked:false
        },{
          title:'敲代码',
          checked:true
      }],
      mark:''
  }

  constructor() { }

  ngOnInit() {
  }

  doSubmit(){
    /*    
    jquery  dom操作
      <input type="text" id="username" />
      let usernameDom:any=document.getElementById('username');
      console.log(usernameDom.value);    
    */
    
    console.log(this.peopleInfo);
  }
}

• app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 引入表单相关的模块 才可以用双休数据绑定
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FormComponent } from './components/form/form.component';

@NgModule({
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
...
})
...

五、Angular中的服务 以及自定义服务

5.1、创建服务命令

ng g service my-new-service
# 创建到指定目录下面 
ng g service services/storage

5.2、app.module.ts 里面引入创建的服务

• 1.app.module.ts 里面引入创建的服务

import { StorageService } from './services/storage.service';

• 2.NgModule 里面的 providers 里面依赖注入服务

@NgModule({ 
	declarations: [ # 组件
		AppComponent, 
		...
		TodolistComponent 
	], 
	imports: [ BrowserModule, FormsModule ], # 模块 
	providers: [StorageService],  # 服务
	bootstrap: [AppComponent] 
}) 
export class AppModule { }

5.3、使用的页面引入服务，注册服务

• 引入

import { StorageService } from '../../services/storage.service';
constructor(private storage: StorageService) {
}

• 使用

addData(){ 
	this.list.push(this.username);
	this.storage.set('todolist',this.list);
} 

removerData(key){
	this.list.splice(key,1); 
	this.storage.set('todolist',this.list);
}

5.4、todolist实现

• todolist.component.html

<h2>todoList</h2>
<div class="todolist">
    <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
    <hr>
    <h3>待办事项</h3>
    <ul>
      <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
       <input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChage()" />  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>
      </li>
    </ul>
    <h3>已完成事项</h3>
    <ul>
        <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
         <input type="checkbox" [(ngModel)]="item.status"   (change)="checkboxChage()"/>  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>
        </li>
      </ul>
</div>

• todolist.component.ts

import { Component, OnInit } from '@angular/core';
// 引入服务
import { StorageService } from '../../services/storage.service';

@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.scss']
})

export class TodolistComponent implements OnInit {
  public keyword:string;
  public todolist:any[]=[];

  constructor(public storage:StorageService) {
   }

  ngOnInit() {
    var todolist:any=this.storage.get('todolist');
    if(todolist){
      this.todolist=todolist;        
    }
  }

  doAdd(e){
    if(e.keyCode==13){
        if(!this.todolistHasKeyword(this.todolist,this.keyword)){
          this.todolist.push({
            title:this.keyword,
            status:0                   # 0表示代办事项  1表示已完成事项
          });
          this.keyword='';
          //用到this一定要注意this指向
          this.storage.set('todolist',this.todolist);          
        }else{
          alert('数据已经存在');
          this.keyword='';
        }
     }
  }

  deleteData(key){
    this.todolist.splice(key,1);
    this.storage.set('todolist',this.todolist); 
  }

  //如果数组里面有keyword返回true  否则返回false
  todolistHasKeyword(todolist:any,keyword:any){
    if(!keyword) return false;
    for(var i=0;i<todolist.length;i++){
      if(todolist[i].title==keyword){

          return true;
      } 
    }
    return false;
  }

  checkboxChage(){
    console.log('事件触发了');
    this.storage.set('todolist',this.todolist); 
  }
}

• app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

//引入表单相关的模块 才可以用双休数据绑定
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { SearchComponent } from './components/search/search.component';
import { TodolistComponent } from './components/todolist/todolist.component';


//引入并且配置服务
import { StorageService } from './services/storage.service';


@NgModule({
  declarations: [
    AppComponent,
    SearchComponent,
    TodolistComponent   
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

六、Angular 中的 Dom 操作以及@ViewChild、 Angular 执行 css3 动画

6.1、Angular 中的 dom 操作（原生 js）

ngAfterViewInit(){
	let boxDom:any=document.getElementById('box'); 
	boxDom.style.color='red'; 
}

6.2、Angular 中的 dom 操作（ViewChild）

import { Component ,ViewChild,ElementRef} from '@angular/core';
@ViewChild('myattr') myattr: ElementRef;

ngAfterViewInit(){ 
	let attrEl = this.myattr.nativeElement; 
}

<div #myattr></div>

6.3、父子组件中通过 ViewChild 调用子组件 的方法

• 1.调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

• 2、引入 ViewChild

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

• 3.ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer;

• 4.调用子组件

run(){
	this.footer.footerRun(); 
}

七、Angular 父子组件以及组件之间通讯

7.1、父组件给子组件传值-@input

  父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件

• 1.父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app-header>

• 2.子组件引入 Input 模块

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

• 3.子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}
}

• 4.子组件中使用父组件的数据

<h2>这是头部组件--{{msg}}</h2>

7.2、子组件通过@Output 触发父组件的方 法

• 1.子组件引入 Output 和 EventEmitter

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

• 2.子组件中实例化 EventEmitter

@Output() private outer=new EventEmitter<string>();
/*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/

• 3.子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent(){
 // alert('zhixing'); 
 this.outer.emit('msg from child') 
}

• 4.父组件调用子组件的时候，定义接收事件 ,outer 就是子组件的 EventEmitter 对象 outer

<app-header (outer)="runParent($event)"></app-header>

• 5.父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

//接收子组件传递过来的数据 
runParent(msg:string){ 
	alert(msg); 
}

7.3、父组件通过@ViewChild 主动获取子组 件的数据和方法

• 1.调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

• 2.引入 ViewChild

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

• 3.ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer;

• 4.调用子组件

run(){
	this.footer.footerRun();
}

7.4、非父子组件通讯

• 1、公共的服务
• 2、Localstorage(推荐)
• 3、Cookie

八、Angular 中的生命周期函数

• 官方文档：https://www.angular.cn/guide/lifecycle-hooks
• 生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。

方法	作用
constructor()	构造函数中除了使用简单的值对局部变量进行初始化 之外，什么都不应该做。 （非生命周期函数）
ngOnChanges()	当 Angular（重新）设置数据绑定输入属性时响应。 该 方法接受当前和上一属性值的 SimpleChanges 对象 当被绑定的输入属性的值发生变化时调用，首次调用一 定会发生在
ngOnInit()	ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输 入属性之后，初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用，只调用一次。 使用 ngOnInit() 有两个原因： 1、在构造函数之后马上执行复杂的初始化逻辑 2、在 Angular 设置完输入属性之后，对该组件进行准备。 有经验的开发者会认同组件的构建应该很便宜和安全。
ngDoCheck()	检测，并在发生 Angular 无法或不愿意自己检测的变 化时作出反应。在每个 Angular 变更检测周期中调用， ngOnChanges() 和 ngOnInit()之后。
ngAfterContentInit()	当把内容投影进组件之后调用。第一次 ngDoCheck() 之 后调用，只调用一次。
ngAfterContentChecked()	每次完成被投影组件内容的变更检测之后调用。 ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
ngAfterViewInit()	初始化完组件视图及其子视图之后调用。第一 次 ngAfterContentChecked()之后调用，只调用一次。
ngAfterViewChecked()	每次做完组件视图和子视图的变更检测之后调用。 ngAfterViewInit()和每次 ngAfterContentChecked() 之后 调用。
ngOnDestroy()	当 Angular 每次销毁指令/组件之前调用并清扫。在这 儿反订阅可观察对象和分离事件处理器，以防内存泄 漏。 在 Angular 销毁指令/组件之前调用。

九、Rxjs异步数据流编程-Rxjs快速入门

9.1、 Rxjs 介绍

• 参考手册：https://www.npmjs.com/package/rxjs

• 中文手册：https://cn.rx.js.org/
    RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据 流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流 的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据， 并组合不同的操作符来轻松优雅的实现你所需要的功能。
    RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目 标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
    RxJS 里面提供了很多模块。这里我们主要给大家讲 RxJS 里面最常用的 Observable 和 fromEvent。

• 目前常见的异步编程的几种方法：

  • 1、回调函数
  • 2、事件监听/发布订阅
  • 3、Promise
  • 4、Rxjs

9.2、 Promise 和 RxJS 处理异步对比

• Promise 处理异步:

letpromise = newPromise(resolve=>{ 
	setTimeout(()=>{ 
		resolve('---promisetimeout---'); 
		},2000); 
}); 
promise.then(value=>console.log(value));

• RxJS 处理异步：

import{Observable}from'rxjs';
letstream = newObservable(observer=>{ 
	setTimeout(()=>{ 
		observer.next('observabletimeout'); 
	},2000); 
});
stream.subscribe(value=>console.log(value));

• 从上面列子可以看到 RxJS 和 Promise 的基本用法非常类似，除了一些关键词不同。 Promise 里面用的是 then() 和resolve()，而 RxJS 里面用的是 next() 和 subscribe()。 从上面例子我们感觉Promise 和 RxJS 的用法基本相似。
• 其实Rxjs相比Promise 要强大很多。 比如 Rxjs 中可以中途撤回、Rxjs 可以发射多个值、Rxjs提供了多种工具函数等等。

9.3、 Rxjs unsubscribe 取消订阅

  Promise的创建之后，动作是无法撤回的。Observable不一样，动作可以通过 unsbscribe() 方 法中途撤回，而且 Observable在内部做了智能的处理.

• Promise 创建之后动作无法撤回

letpromise=newPromise(resolve=>{ 
	setTimeout(()=>{ 
		resolve('---promisetimeout---'); 
	},2000); 
}); 
promise.then(value=>console.log(value));

• Rxjs 可以通过 unsubscribe() 可以撤回 subscribe 的动作

letstream=newObservable(observer=>{ 
	lettimeout=setTimeout(()=>{ 
		clearTimeout(timeout); 
		observer.next('observabletimeout'); 
	},2000); 
}); 

letdisposable=stream.subscribe(value=>console.log(value)); 
setTimeout(()=>{ 
	//取消执行
 	disposable.unsubscribe(); 
 },1000);

9.4、Rxjs 订阅后多次执行

  如果我们想让异步里面的方法多次执行，比如下面代码。
这一点 Promise 是做不到的，对于 Promise 来说，最终结果要么 resole（兑现）、要么 reject （拒绝），而且都只能触发一次。如果在同一个 Promise 对象上多次调用 resolve 方法， 则会抛异常。而 Observable 不一样，它可以不断地触发下一个值，就像 next() 这个方法的 名字所暗示的那样。

letpromise=newPromise(resolve=>{ 
	setInterval(()=>{ 
		resolve('---promisesetInterval---'); 
	},2000); 
}); 
promise.then(value=>console.log(value));

• Rxjs

letstream=newObservable<number>(observer=>{ 
	letcount=0; 
	setInterval(()=>{ 
		observer.next(count++); 
	},1000);
}); 
stream.subscribe(value=>console.log("Observable>"+value));

9.5、Angualr6.x 之前使用 Rxjs 的工具函数 mapfilter

 注意：Angular6 以后使用以前的 rxjs 方法，必须安装 rxjs-compat 模块才可以使用 map、 filter 方法。
  angular6 后官方使用的是 RXJS6 的新特性，所以官方给出了一个可以暂时延缓我们不需要修 改 rsjx 代码的办法。

npm install rxjs-compat

import {Observable} from 'rxjs'; 
import 'rxjs/Rx';
letstream=newObservable<any>(observer=>{ 
	letcount=0; 
		setInterval(()=>{ o
		bserver.next(count++); 
	},1000); 
});

stream.filter(val=>val%2==0) 
.subscribe(value=>console.log("filter>"+value));

stream .map(value=>{ returnvalue*value }) 
.subscribe(value=>console.log("map>"+value));

9.6、Angualr6.x 以后 Rxjs6.x 的变化以及 使用

• Rxjs 的变化参考文档：http://bbs.itying.com/topic/5bfce189b110d80f905ae545

• RXJS6 改变了包的结构，主要变化在 import 方式和 operator 上面以及使用 pipe()

import {Observable} from 'rxjs'; 
import {map,filter} from 'rxjs/operators';

let stream= new Observable<any>(observer => {
let count = 0; 
setInterval(() => { 
observer.next(count++); 
}, 1000);
}); 
stream.pipe( filter(val=>val%2==0) )
.subscribe(value => console.log("filter>"+value)); 

stream.pipe( filter(val=>val%2==0), map(value => { 
return value * value }
)).subscribe(value => console.log("map>"+value));

9.7、Rxjs 延迟执行

import{Observable,fromEvent}from'rxjs'; 
import{map,filter,throttleTime}from'rxjs/operators'; 

var button=document.querySelector('button');
fromEvent(button,'click').pipe( throttleTime(1000))
.subscribe(()=>console.log(`Clicked`));

十、Angular 中的数据交互（get、jsonp、post）

10.1、Angularget 请求数据

  Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。

• 1、在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';

imports: [ BrowserModule, HttpClientModule ]

• 2、在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

• 3、get 请求数据

var api = "http://a.itying.com/api/productlist"; this.http.get(api).subscribe(response => { 
	console.log(response); 
});

10.2、Angularpost 提交数据

   Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。

• 1、在 app.module.ts 中引入 HttpClientModule 并注入

import {HttpClientModule} from '@angular/common/http';

imports: [ BrowserModule, HttpClientModule ]

• 2、在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient

import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }

• 3、post 提交数据

consthttpOptions={ 
	headers: newHttpHeaders({'Content-Type':'application/json'})
};

var api="http://127.0.0.1:3000/doLogin"; 
this.http.post(api,{username:'张三',age:'20'},httpOptions)
.subscribe(response=>{ 
	console.log(response);
 });

10.3、AngularJsonp 请求数据

• 1、在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入

import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';

imports: [ BrowserModule, HttpClientModule, HttpClientJsonpModule ]

• 2、在用到的地方引入 HttpClient 并在构造函数声明

import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

• 3、jsonp 请求数据

var api = "http://a.itying.com/api/productlist"; 
this.http.jsonp(api,'callback').subscribe(response => { 	
	console.log(response); 
});

10.4、Angular 中使用第三方模块 axios 请求数据

• 1、安装 axios

cnpm install axios--save

• 2、用到的地方引入 axios

import axios from 'axios';

• 3、看文档使用

axios.get('/user?ID=12345').then(function(response){ 
	//handlesuccess 
	console.log(response); 
}).catch(function(error){ 
	//handleerror 
	console.log(error); 
}).then(function(){ 
	//alwaysexecuted 
});

十一、Angular 中的路由

11.1、Angular 创建一个默认带路由的项目

• 1.命令创建项目

ng new angualrdemo08 --skip-install

• 2.创建需要的组件

ng g component home 
ng g component news 
ng g component newscontent

• 3.找到 app-routing.module.ts 配置路由

  • 引入组件

  import { HomeComponent } from './home/home.component'; 
  import { NewsComponent } from './news/news.component'; 
  import { NewscontentComponent } from './newscontent/newscontent.component';
  

  • 配置路由

  const routes: Routes = [ 
  	{path: 'home', component: HomeComponent}, 
  	{path: 'news', component: NewsComponent}, 
  	{path: 'newscontent/:id', component: NewscontentComponent}, 
  	{ path: '', redirectTo: '/home', pathMatch: 'full' } 
  ];
  

• 4.找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

<h1> <a routerLink="/home">首页</a> 
<a routerLink="/news">新闻</a> </h1>

<router-outlet></router-outlet>

11.2、Angular routerLink 跳转页面 默认路由

<a routerLink="/home">首页</a> 
<a routerLink="/news">新闻</a>

//匹配不到路由的时候加载的组件 或者跳转的路由 
{ 
	path: '**', /*任意的路由*/ 
	// component:HomeComponent 
	redirectTo:'home' 
}

11.3、Angular routerLinkActive 设 置 routerLink 默认选中路由

<h1> 
	<a routerLink="/home" routerLinkActive="active">首页</a> 
	<a routerLink="/news" routerLinkActive="active">新闻</a> 
</h1>

<h1> 
	<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a> 
	<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a> 
</h1>

.active{ color:red; }

11.4、动态路由

• 1.配置动态路由

const routes: Routes = [ 
	{path: 'home', component: HomeComponent}, 
	{path: 'news', component: NewsComponent}, 
	{path: 'newscontent/:id', component: NewscontentComponent}, 
	{ path: '', redirectTo: '/home', pathMatch: 'full' }
];

• 2.跳转传值

<a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a> 
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>

• 3.获取动态路由的值

import { ActivatedRoute} from '@angular/router';
constructor( private route: ActivatedRoute) {
}
ngOnInit() { console.log(this.route.params); 
this.route.params.subscribe(data=>this.id=data.id); }

11.5、动态路由的 js 跳转

• 1.引入

import { Router } from '@angular/router';

• 2.初始化

export class HomeComponent implements OnInit { 
constructor(private router: Router) {}
ngOnInit() { }
goNews(){ 
	// this.router.navigate(['/news', hero.id]);
	this.router.navigate(['/news']);
	}
}

• 3.路由跳转

this.router.navigate(['/news', hero.id]);

11.6、路由 get 传值 js 跳转

• 1.引入 NavigationExtras

import { Router ,NavigationExtras} from '@angular/router';

• 2.定义一个 goNewsContent 方法执行跳转，用 NavigationExtras 配置传参。

goNewsContent(){
	let navigationExtras: NavigationExtras = { 
		queryParams: { 'session_id': '123' }, fragment: 'anchor' 
	};
	this.router.navigate(['/news'],navigationExtras);
}

• 3.获取 get 传值

constructor(private route: ActivatedRoute) { 
	console.log(this.route.queryParams); 
}

11.7、父子路由

• 1.创建组件引入组件

import { NewsaddComponent } from './components/newsadd/newsadd.component'; 
import { NewslistComponent } from './components/newslist/newslist.component';

• 2.配置路由

{
path: 'news', component:NewsComponent,
children: [
	{
		path:'newslist',
		component:NewslistComponent 
	}, 
	{ 
		path:'newsadd',
		component:NewsaddComponent
	}]
}

• 3.父组件中定义router-outlet

<router-outlet></router-outlet>