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

问题

I'm new to Angular. I may not be able to frame the question correctly. But please let me explain. I've created a MEAN application. Its is deployed on heroku. Here is the link. If you click on any card i.e Read more button, you'll auto scroll to a div where contents are displayed. But I want this content to be displayed on a separate fresh page because I'm planning to associate other features such as Like, Upvote, Report etc. Please show me some direction.

PS: Here is the github repo. I've kept it open for all.

回答1:

I am assuming that you have ngFor to display your articles in your angular articles-list.component.html like this

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

Now you have 2 options.

Option-1

One is to make a service in set clicked article object in service variable and then get that article object on your another page like this in your data.service.ts

clickedArticle : Object = {}; 

setCLickedArticleObj(obj){
   clickedArticle  = obj;
}

getClickedArticle(){
   return clickedArticle;  
}

And in your ariticles-list.component.ts

Make a function like this

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

On your new page/component you can get that clicked article object like this

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

Option-2

in option 2 i am assuming that you are receiving each article _id form the back-end api so you can set your clicked article's _id to localstorage and on your new page/component you can get that clicked article details on new component load by hitting article detail api. For this solution you can make a function in your service like this

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

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

Then in your articles-list.component.html you will have like this

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

In your articles-list.component.ts you will have a function like this

articledId : String = '';

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

And on your new page/component article-details.compnent.ts you can get that article detail on ngOnInit like this

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

回答2:

I dont know exactly which part is missing but:

if you need the navigation bit to the different page: link
if you dont know how to bring the data to the different page:link

回答3:

Here is similiar working demo

You can use Router to do the same.

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

来源：https://stackoverflow.com/questions/58836164/how-to-show-contents-of-a-card-on-a-separate-page-angular

标签

angular

single-page-application

mean-stack