angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法

在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ù)。

10年積累的成都網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有邵原免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

第一步：配置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é)中，我們能過(guò)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è)方法——用來(lái)向遠(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( //通過(guò)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">
 <h2>{{ post.name }}</h2>
 <h4>{{ post.addtime }}</h4> 
 <ul [innerHTML]="post.content"></ul>
</div>

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：angular6.0使用教程之父組件通過(guò)url傳遞id給子組件的方法
當(dāng)前URL：http://bm7419.com/article24/igosje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作、App開發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容