在angular6.0使用教程：angular主從組件章節(jié)我們介紹了父組件向子組件傳遞數(shù)據(jù)，當(dāng)時(shí)是在同一個(gè)頁(yè)面?zhèn)鬟f數(shù)據(jù)的。而本章的angular數(shù)據(jù)傳遞將是在不同頁(yè)面間的傳遞，即list組件頁(yè)面向post組件頁(yè)面?zhèn)鬟f數(shù)據(jù)。

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

在上一章angular6.0使用教程：angular6.0的路由使用中我們?yōu)閍ngular6.0項(xiàng)目設(shè)置了路由，我們只設(shè)置了home組件和list組件的路由。我們還要設(shè)置post組件的路由，因?yàn)閜ost是產(chǎn)品組件，而不同的產(chǎn)品會(huì)有不同的id，顯示不同的產(chǎn)品內(nèi)容，所以，我們要為每一個(gè)id要設(shè)置對(duì)應(yīng)的路由。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服務(wù)代碼：

在angular6.0使用教程：創(chuàng)建和使得angular服務(wù)章節(jié)中，我們能過angular6.0的服務(wù)向遠(yuǎn)程服務(wù)器接口請(qǐng)求數(shù)據(jù)，并在list組件中接收獲取到angular請(qǐng)求到的數(shù)據(jù)。具體，可參閱這一章節(jié)。

本章我們要實(shí)現(xiàn)的功能是：點(diǎn)擊list組件頁(yè)面上的一個(gè)列表鏈接，就向post組件頁(yè)面?zhèn)鬟f一個(gè)產(chǎn)品id，post組件會(huì)向db.service.ts服務(wù)獲取這個(gè)產(chǎn)品id對(duì)應(yīng)的產(chǎn)品信息。所以，我們要在db.service.ts服務(wù)中再添加一個(gè)方法——用來向遠(yuǎn)程服務(wù)器請(qǐng)求這個(gè)產(chǎn)品id的信息。代碼如下：

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

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

1：引入db.service.ts服務(wù)：

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

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

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

3：在post組件的構(gòu)造函數(shù)中實(shí)例化DbService服務(wù)和ActivatedRoute模塊對(duì)象：

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

4：聲明一個(gè)接收變量：

post:any;

5：添加獲取DbService服務(wù)數(shù)據(jù)的方法：

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

6：在初始化ngOnInit中調(diào)用這個(gè)方法：

ngOnInit() {
 this.getPost(); 
}

7：在post.component.html前臺(tái)代碼中調(diào)用數(shù)據(jù)：

<div class="post_detail" *ngIf="post">
 <h1>{{ post.name }}</h1>
 <h3>{{ post.addtime }}</h3> 
 <ul [innerHTML]="post.content"></ul>
</div>

這時(shí)，在前臺(tái)調(diào)用可能會(huì)有“調(diào)用HTML字符串”出現(xiàn)的問題，這個(gè)可以參閱angular6.0使用教程：angular如何調(diào)用HTML字符串章節(jié)。

這樣，我們就實(shí)現(xiàn)了angular6.0的子組件通過url獲取父組件傳遞過來的id，再通過服務(wù)請(qǐng)求遠(yuǎn)程數(shù)據(jù)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論