我们有一个新闻列表页面，里面每条是这样的
|
1 |
<a class="weui-media-box weui-media-box_appmsg" routerLink="/news_detail" [queryParams]="{id:item.id}" *ngFor="let item of newsservice.newslist"> |
newsservice.newslist 是有多个news对象的集合
routerLink=”/news_detail” [queryParams]=”{id:item.id}” 跳转到详情页，并传入这条新闻的id
这里我们不想用网络来获取数据，而是想在newsservice.newslist对象中直接找到对应新闻id的数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Component, OnInit } from '@angular/core'; import { NewsService } from '../service/news.service'; import {ActivatedRoute} from '@angular/router'; import { filter, find } from 'rxjs/operators'; import { news } from '../model/news.model'; @Component({ selector: 'app-news-detail', templateUrl: './news-detail.component.html', styleUrls: ['./news-detail.component.less'] }) export class NewsDetailComponent implements OnInit { public newsitem: news; constructor(public newsservice: NewsService,public route:ActivatedRoute) { } ngOnInit(): void { this.route.queryParams.subscribe((res)=>{ this.newsitem = this.newsservice.newslist.find(item => item.id == res.id); }) } } |
上面就是详情页面的代码
收工了！！！