如何在单独的页面上显示卡片内容 [Angular]

Question

我是 Angular 的新手。我可能无法正确地提出问题。但请让我解释一下。我创建了一个 MEAN 应用程序。它部署在 heroku。这里是link。如果您单击任何卡片，即 Read more 按钮，您将自动滚动到显示内容的 div。但我希望将此内容显示在单独的新页面上，因为我打算关联其他功能，例如 Like、Upvote、Report 等。请指点方向。

PS：Here 是 github 仓库。我一直对所有人开放。

Answer 1

我不知道到底缺少了哪一部分但是：

如果您需要不同页面的导航位： link
如果您不知道如何将数据带到不同的页面：link

Answer 2

我假设您 ngFor 可以像这样 angular 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 来自 back-end api，因此您可以将点击文章的 _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;
   })
}

Answer 3

Here is similiar working demo

您可以使用路由器来做同样的事情。

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

如何在单独的页面上显示卡片内容 [Angular]

How to show contents of a card on a separate page [Angular]

angular

single-page-application

mean-stack