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

10年積累的成都網站制作、網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計制作后付款的網站建設流程，更有邵原免費網站建設讓你可以放心的選擇與我們合作。

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

在上一章angular6.0使用教程：angular6.0的路由使用中我們?yōu)閍ngular6.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使用教程：創(chuàng)建和使得angular服務章節(jié)中，我們能過angular6.0的服務向遠程服務器接口請求數(shù)據，并在list組件中接收獲取到angular請求到的數(shù)據。具體，可參閱這一章節(jié)。

本章我們要實現(xiàn)的功能是：點擊list組件頁面上的一個列表鏈接，就向post組件頁面?zhèn)鬟f一個產品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組件文件中添加獲取數(shù)據方法：

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

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

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

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

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

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

4：聲明一個接收變量：

post:any;

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

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

6：在初始化ngOnInit中調用這個方法：

ngOnInit() {
 this.getPost(); 
}

7：在post.component.html前臺代碼中調用數(shù)據：

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標題：angular6.0使用教程之父組件通過url傳遞id給子組件的方法
當前URL：http://jinyejixie.com/article24/igosje.html

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

廣告

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