angular6.0使用教程之父組件通過url傳遞id給子組件的方法
在angular6.0使用教程：angular主從組件章節(jié)我們介紹了父組件向子組件傳遞數(shù)據(jù)，當時是在同一個頁面?zhèn)鬟f數(shù)據(jù)的。而本章的angular數(shù)據(jù)傳遞將是在不同頁面間的傳遞，即list組件頁面向post組件頁面?zhèn)鬟f數(shù)據(jù)。
第一步：配置post組件的路由：
在上一章angular6.0使用教程：angular6.0的路由使用中我們?yōu)閍ngular6.0項目設置了路由，我們只設置了home組件和list組件的路由。我們還要設置post組件的路由，因為post是產(chǎn)品組件，而不同的產(chǎn)品會有不同的id，顯示不同的產(chǎn)品內(nèi)容，所以，我們要為每一個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ù)據(jù)，并在list組件中接收獲取到angular請求到的數(shù)據(jù)。具體，可參閱這一章節(jié)。
本章我們要實現(xiàn)的功能是：點擊list組件頁面上的一個列表鏈接，就向post組件頁面?zhèn)鬟f一個產(chǎn)品id，post組件會向db.service.ts服務獲取這個產(chǎn)品id對應的產(chǎn)品信息。所以，我們要在db.service.ts服務中再添加一個方法——用來向遠程服務器請求這個產(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服務：
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ù)據(jù)的方法：
getPost():void{
var id = +this.route.snapshot.paramMap.get('id'); //獲取當前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)用這個方法：
ngOnInit() {
this.getPost();
}
7：在post.component.html前臺代碼中調(diào)用數(shù)據(jù)：
<div class="post_detail" *ngIf="post">
<h1>{{ post.name }}</h1>
<h3>{{ post.addtime }}</h3>
<ul [innerHTML]="post.content"></ul>
</div>
這時，在前臺調(diào)用可能會有“調(diào)用HTML字符串”出現(xiàn)的問題，這個可以參閱angular6.0使用教程：angular如何調(diào)用HTML字符串章節(jié)。
這樣，我們就實現(xiàn)了angular6.0的子組件通過url獲取父組件傳遞過來的id，再通過服務請求遠程數(shù)據(jù)。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
能夠驗證用戶在表單中輸入的內(nèi)容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗證（模板驗證），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Angular中使用ui router實現(xiàn)系統(tǒng)權限控制及開發(fā)遇到問題
這篇文章主要介紹了Angular中使用ui router實現(xiàn)系統(tǒng)權限控制及開發(fā)遇到問題的相關資料,本文分步驟介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了AngularJS應用開發(fā)思維之依賴注入第三篇，感興趣的小伙伴們可以參考一下2016-08-08
利用VS Code開發(fā)你的第一個AngularJS 2應用程序
這篇文章主要給大家介紹了關于利用VS Code如何開發(fā)你的第一個AngularJS 2應用程序的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友下面來一起看看吧。2017-12-12
這篇文章主要介紹了Angularjs的Controller間通信機制,結合實例形式分析了Controller通信機制的原理、實現(xiàn)技巧與相關操作技巧,需要的朋友可以參考下2016-11-11
Angularjs使用ng-repeat中$even和$odd屬性的注意事項
無可否認angularjs的崛起成為前端很大的福利，最近接到項目，框架便選中了angularjs。angularjs最吸引人的地方就是數(shù)據(jù)的雙向綁定和指令了，這篇文章主要介紹了Angularjs中使用ng-repeat的$even和$odd屬性的注意事項,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Angular.js去除頁面中顯示的空行方法，文中給出了詳細的示例代碼供大家參考學習，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
本篇文章主要介紹了淺談Angular4實現(xiàn)熱加載開發(fā)旅程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了淺談Angular路由守衛(wèi),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了angularjs中的單元測試實例,本文主要說說利用karma和jasmine來進行ng模塊的單元測試,需要的朋友可以參考下2014-12-12