在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變量 } );}6：在初始化ngOnInit中調用這個方法：
ngOnInit() { this.getPost(); }7：在post.component.html前臺代碼中調用數據：
<div class="post_detail" *ngIf="post"> <h1>{{ post.name }}</h1> <h3>{{ post.addtime }}</h3> <ul [innerHTML]="post.content"></ul></div>這時，在前臺調用可能會有“調用HTML字符串”出現的問題，這個可以參閱angular6.0使用教程：angular如何調用HTML字符串章節。
這樣，我們就實現了angular6.0的子組件通過url獲取父組件傳遞過來的id，再通過服務請求遠程數據。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
