溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在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">
<h2>{{ post.name }}</h2>
<h4>{{ post.addtime }}</h4>
<ul [innerHTML]="post.content"></ul>
</div>
這時，在前臺調用可能會有“調用HTML字符串”出現的問題，這個可以參閱angular6.0使用教程：angular如何調用HTML字符串章節。
這樣，我們就實現了angular6.0的子組件通過url獲取父組件傳遞過來的id，再通過服務請求遠程數據。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
