在angular6.0使用教程：angular主從組件章節我們介紹了父組件向子組件傳遞數據，當時是在同一個頁面傳遞數據的。而本章的angular數據傳遞將是在不同頁面間的傳遞，即list組件頁面向post組件頁面傳遞數據。

第一步：配置post組件的路由：

在上一章angular6.0使用教程：angular6.0的路由使用中我們為angular6.0項目設置了路由，我們只設置了home組件和list組件的路由。我們還要設置post組件的路由，因為post是產品組件，而不同的產品會有不同的id，顯示不同的產品內容，所以，我們要為每一個id要設置對應的路由。app-routing.module.ts文件代碼如下：

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import {HomeComponent} from "./home/home.component"; //引入home組件import {ListComponent} from "./list/list.component";//引入list組件import {PostComponent} from "./post/post.component";//引入post組件const routes: Routes = [ { path:'home', component:HomeComponent }, { path:'list', component:ListComponent }, //post組件路由 { path:'post/:id', component:PostComponent }, { path:'**', redirectTo:'/home' }];@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]})export class AppRoutingModule { }

第二步：修改db.service.ts服務代碼：

在angular6.0使用教程：創建和使得angular服務章節中，我們能過angular6.0的服務向遠程服務器接口請求數據，并在list組件中接收獲取到angular請求到的數據。具體，可參閱這一章節。

本章我們要實現的功能是：點擊list組件頁面上的一個列表鏈接，就向post組件頁面傳遞一個產品id，post組件會向db.service.ts服務獲取這個產品id對應的產品信息。所以，我們要在db.service.ts服務中再添加一個方法——用來向遠程服務器請求這個產品id的信息。代碼如下：

getPost(id:number):Observable<any>{ return this.http.get("/api/dream/index.php/home/index/post_detail/id/"+id);}

第三步：在post.component.ts組件文件中添加獲取數據方法：

1：引入db.service.ts服務：

import {DbService} from "../db.service";

2：引入ActivatedRoute模塊【當前被激活的路由，即當前post，可以獲取當前post的id】：

import {ActivatedRoute} from "@angular/router";

3：在post組件的構造函數中實例化DbService服務和ActivatedRoute模塊對象：

constructor(private db:DbService,private route:ActivatedRoute) { }

4：聲明一個接收變量：

post:any;

5：添加獲取DbService服務數據的方法：

getPost():void{ var id = +this.route.snapshot.paramMap.get('id'); //獲取當前Post的產品id this.db.getPost(id).subscribe( //通過db:DbService的getPost()方法獲取數據 data=>{ this.post = data; //把產品全部的信息賦值給post變量 } );}