Wie erstellt man dynamische Routerlinks in Winkel 2?

Question

Ich bin neu bei eckigen 2 und ich versuche, eine Nachrichtenwebsite zu erstellen, die bedeutet, dass die Homepage zum Beispiel verschiedene Artikel aus verschiedenen Kategorien enthält.

So bekomme ich die Artikel zum Beispiel im Schieberabschnitt von api das json Ergebnis des Link ex enthält: '/ Schieber/article1', '/ Sport/article3' etc ..

wenn ich Schleife versuchen die ergebnisse im html der routerlink funktioniert nicht!

Hier ist ein Beispielcode

Home.component.html // können sagen, dass Link enthält '/ Sport'

<a [routerLink]="[item.link]">{{item.title}}</a> 

Route.config.ts

export const rootRouterConfig: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'sport', component: SportComponent } 
]; 

** Ich vergesse den Fehler zu erwähnen

Uncaught (in promise): TypeError: Cannot read property 'outlets' of null

Home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HomeService } from '../../_services/home.service'; 
import { ContentInfo } from '../../_models/content'; 
@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'], 
    providers: [HomeService] 
}) 
export class HomeComponent implements OnInit { 
    mainNewsItem: ContentInfo[]; 
    constructor(private _homeService: HomeService) { 
    this.mainNewsItem = []; 
    } 
    ngOnInit() { 
     // Get Main News Item 
     this._homeService.getMainNewsItem() 
      .subscribe(content => this.mainNewsItem = content, 
      error => this._homeService = <any>error) 
      ; 
    } 
} 

ich gebraucht * ngif

*ngIf="mainNewsItem?.length > 0" 

die div gegangen ist, aber warum? Ich meine das MainNewsItem enthält Daten!

Thanks :)

Answer 1

können Sie Route Parameter verwenden:

{ path: 'sport/:articleTitle', component: SportComponent },

Source: Angular doc's: route with parameter

In Ihrem SportComponent Sie die ActivatedRoute in Ihrem Konstruktor injizieren können die Parameter zu erhalten: constructor(private route: ActivatedRoute)