Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular 16: Route ID

03.02.2023 (👁1948)


 

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>