我不知道确切缺少哪一部分，但是：

• 如果您需要导航到其他页面： link

• 如果您不知道如何将数据带到其他页面：link

我假设您有ngFor可以用这样的角度articles-list.component.html显示文章

<div class="article" *ngFor="let card of cards" (click)="goToArticle(card )">
  // your card html here
</div>

现在您有2个选择。

选项1

一种方法是在服务变量中的单击集中设置一个service对象，然后在article object这样的另一页上获取该data.service.ts

clickedArticle : Object = {}; 

setCLickedArticleObj(obj){
   clickedArticle  = obj;
}

getClickedArticle(){
   return clickedArticle;  
}

在您的ariticles-list.component.ts

实现这样的功能

goToArticle(article){
  this._dataService.setCLickedArticleObj(article)
  this.router.navigate('/article-details')
}

在新的page/component上，您可以像这样获得点击的对象

// service import 
import {DataService} from 'your-path-to-service'
constructor(private _dataService : DataService){
}
incomingArticleObject : Object = {};
ngOnInit(){
   this.incomingArticleObject  = this._dataService.getClickedArticle()
}

选项2

在选项2中，我假设您正在接收_id API的每篇文章back-end，因此您可以将点击的文章的_id设置为localstorage，并在新的page/component可以通过点击article detail api获得有关新组件加载的单击的文章详细信息。 对于此解决方案，您可以像这样在服务中实现功能

setClickedArticle(id){
   localStorage.setItem('__ai',id)
}

getClickedAritcleId(){
   return localStorage.getItem('__ai');  
}

然后在您的articles-list.component.html中，您将像这样

 <div class="article" *ngFor="let card of cards">
  // your card html here
</div>

在您的articles-list.component.ts中，您将拥有这样的功能

articledId : String = '';

goToArticleDetails(id){
   this._dataService.setClickedArticle(id);
   this.router.navigate('/article-details');
}

在新的page/component article-details.compnent.ts上，您可以像这样在ngOnInit上获得该文章的详细信息

articleId : String = '';
articleDetails : Object = {};
ngOnInit(){
   this.articleId  = this._dataService.getClickedAritcleId()
   this._dataService.getArticleById(this.articleId).subscribe(article=>{
         this.articleDetails  = article;
   })
}

Here is similiar working demo

您可以使用路由器执行相同的操作。

 RouterModule.forRoot([
  {path:'',redirectTo: 'list',pathMatch:'full'},{path:'list',component:ListComponent},{path: 'home/:id',component:HomeComponent}
  ])
],