Wenn die Route der ID nicht gefunden wird, dann sollte man den Pfad im router anpassen.
Um auf eine ID zu kommen, muss der Pfad erweitert werden mit /:id
App-routing.module.ts
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { EditArticleComponent } from './components/articles/edit-article/edit-article.component'; import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component'; import { ReadArticleComponent } from './components/articles/read-article/read-article.component';
const routes: Routes = [ { path: 'list', component: ListArticlesComponent }, { path: 'edit', component: EditArticleComponent }, { path: 'read/:id', component: ReadArticleComponent }, ];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })
export class AppRoutingModule {
}
|
In component.html
<a href="/read/{{article.idArticle}}" >
|
<style> .listpad_items { width: 100%; display: block; padding: 2px; margin-top: 4px; box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 10%); border-radius: 4px; outline: none; background-color: rgba(255, 255, 255, 1); }
.link_item { text-decoration: none; }
.item_title { text-align: left; font-size: large; padding: 2px; } </style> <p>list-articles</p> <div *ngFor="let article of articles" class="listpad_items">
<a href="/read/{{article.idArticle}}" title="{{article.title}}" class="link_item"> <div> <table> <tr> <td> <div>idArticle: {{article.idArticle}} </div> </td> <td> <div class="item_title">title: {{article.title}} </div> </td> </tr> <div>text: {{article.text}} </div> </table> </div> </a> </div>
|