Question

我正在学习MEAN堆栈。我已经部署了应用程序here。现在，如果您单击任意卡，即Read more按钮，它将自动将您带到显示内容清单的部门。但是我想在单独的路线或页面上显示所有内容，因为现在我计划提供一些更有用的选项，例如Like，Report，Upvote, Donwvote`等。我做了一些改变。请看看他们。

articles.component.html

<div class="row mt-5">
  <div class="col-md-4 mb-3" *ngFor="let article of articles; let i = index;">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">{{article.title}}</h5>
        <a (click)="onPress(i)" class="btn btn-primary">Read More</a>
      </div>
      <div class="card-footer text-muted">
        {{article.date}}
      </div>
    </div>
  </div>
</div>

articles.component.ts

import { Component, OnInit } from '@angular/core';
import { ArticlesService } from '../articles.service'; <---- SERVICE FOR READING FROM MONGODB
import {Router, ActivatedRoute }from '@angular/router';


@Component({
  ...
})
export class ArticlesComponent implements OnInit {
  articles=[]
  constructor(private _articleService: ArticlesService, private router: Router) { }

  ngOnInit() {
    this._articleService.getAllArticles()
    .subscribe(
      res => this.articles = res,
      err => console.log(err)
    )
  }

  onPress(id) {
    console.log(id); <--- THIS PRINTS INDEX NO OF THE CARD
    this.router.navigate(['/options',id]);
  }
}

我上面提到的所有选项都将它们保留在单独的组件中。

options-panel.component.html

<div style="margin: 0 auto; width:50vw">
  <p> {{data }} </p>
  <button (click)="back()"> Back</button>
  <div style="display:flex; margin-top:1rem;padding:1rem;">
    <button style="margin:0.5rem;"> upVote </button>
    <button style="margin:0.5rem;"> DownVote </button>
    ...
  </div>
</div>

options-panel.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute,Router } from '@angular/router';

@Component({
  ...
})
export class OptionsPanelComponent implements OnInit {
  private data;

  constructor(private router: Router,private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe(id =>{
    this.data = id.get('id');
    })
  }

  back(){
    this.router.navigate(['../'])
  }
}

请查看我的 app-routing.module.ts

...
import { ArticlesComponent } from './articles/articles.component';
import { OptionsPanelComponent } from './options-panel/options-panel.component';

const routes: Routes = [
  {path: 'articles', component: ArticlesComponent},
  {path:'',redirectTo: 'articles', pathMatch:'full'},
  {path: 'options/:id', component:OptionsPanelComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

PS：我在Angular中阅读了documentation和dependancy injection。我也尝试了这个stackblitz项目。

但是我只有空白页没有错误。

请告诉我我现在还应该做什么。

Answer 1

您在图片中显示的内容正在运行，但仅打印ID。您必须从某处获取具有该ID的文章，就像您服务一样。

关于您的项目，缺少一些信息，但是您可以进行如下操作。

从路线获取ID。
从服务中检索您的文章。
如果可能，请使用async在前面显示。

options-panel.component.ts

@Component({
  ...
})
export class OptionsPanelComponent implements OnInit {
  private id: number;
  private article$: Observable<Article>;

  constructor(private router: Router, private activatedRoute: ActivatedRoute, private _articleService: ArticlesService) { }

  ngOnInit() {
    this.id = Number(this.activateRoute.snapshot.params['id']);
    if (this.id) {
      this.article$ = this._articleService.getArticle(this.id);
    }
  }

  back(){
    this.router.navigate(['../'])
  }
}

options-panel.component.html

<div style="margin: 0 auto; width:50vw" *ngIf="article$ | async as article">
  <p> {{ article.content }} </p>
  <button (click)="back()"> Back</button>
  <div style="display:flex; margin-top:1rem;padding:1rem;">
    <button style="margin:0.5rem;"> upVote </button>
    <button style="margin:0.5rem;"> DownVote </button>
    ...
  </div>
</div>

如果看到Welcome to my app!和徽标，则必须在index.html文件中。

Answer 2

如果我没看错，那么您想为每个read more创建一个单独的链接。在这种情况下，您必须在html中添加router-link，并且还必须更新路由。试试这个：您的html：

<div class="row mt-5">
  <div class="col-md-4 mb-3" *ngFor="let article of articles; let i = index;">
    <div class="card text-center">
      <div class="card-body">
        <h5 class="card-title">{{article.title}}</h5>
        <a [routerLink]="['/'+article.id]" routerLinkActive="router-link-active" (click)="onPress(i)" class="btn btn-primary">Read More</a>
      </div>
      <div class="card-footer text-muted">
        {{article.date}}
      </div>
    </div>
  </div>
</div>

此html将为每次阅读的更多内容生成链接。您还必须更新路由器，并且必须将路由器插座放置在所需位置。

const routes: Routes = [
  {
    path: 'articles', component: ArticlesComponent,
    children: [
      {
        path: 'id',
        component: 'Read more component'
      }
    ]
  },

  { path: '', redirectTo: 'articles', pathMatch: 'full' },
  { path: 'options/:id', component: OptionsPanelComponent }
];

在单独的路径上渲染卡内容[角度]

2 个答案: