Нет данных после обновления страницы

Question

У меня есть это в моем файле шаблона:

<div class="read-one-article">
  <mat-list
    role="list"
    *ngFor="let article of articleService.dataSource.article"
  >
    <mat-list-item role="listitem">
      <h3>{{ article.id }}</h3>
    </mat-list-item>
    <mat-list-item role="listitem">
      <div class="article-title">
        <h3>{{ article.title }}</h3>
        <span class="article-user-id">user: {{ article.user_id }}</span>
      </div>
    </mat-list-item>
    <mat-list-item role="listitem">
      {{ article.content }}
    </mat-list-item>
    <mat-divider></mat-divider>
  </mat-list>
</div>

Мне нужно передать переменную article.id для функционирования в качестве атрибута в файле .ts того же компонента:

export class ReadOneArticleComponent implements OnInit {
  constructor(public articleService: ArticleService) {}

  ngOnInit() {
    this.articleService.readArticle(article.id);
  }
}

Answer 1

Проблема заключалась в том, что маршрут ..list-article/:id после ссылки sh не показывает данные статьи. Страница была пуста. Вышеуказанный подход совершенно неверен. Решение было ActivatedRoute класс от angular роутера. Итак, я перестроил свой код, и эта проблема была решена.
Вот рабочий код:

import { Component, OnInit } from "@angular/core";
import { ArticleService } from "../../services/article.service";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-read-one-article",
  templateUrl: "./read-one-article.component.html",
  styleUrls: ["./read-one-article.component.less"],
})
export class ReadOneArticleComponent implements OnInit {
  id: number;

  constructor(
    public articleService: ArticleService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.id = this.route.snapshot.params["id"];
    this.articleService.readArticle(this.id);
  }
}