Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «подробности» - PullRequest
Новая
       4

Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «подробности»

0 голосов
/ 13 февраля 2020

Я хочу использовать routerLink в angular приложении.

app.module.ts 

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    RouterModule.forRoot([
      {
         path: 'details/:title',
        component: NewsDetailsComponent
      },
      {
        path: '',
        component: AppComponent
      }
    ])
  ],
    exports: [RouterModule]

app.component. html 

    <ul>
  <li *ngFor="let article of articles"  >
    <img src="{{article.urlToImage}}">
    <a [routerLink]="['/details',article.title]">
    <h1 (click)="goToOtherComponent()" >{{article.title}}</h1>
  </a>
    <p>{{article.description}}</p>
    <p>By <span>{{article.author}}</span></p>
  </li>
</ul>

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { NewsService } from './news.service';
import { Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    this.getArticles();
  }
  constructor(public service: NewsService, private router: Router) {}

  title = 'google-news';

  articles;

  // get data from service
  getArticles() {
    this.service.getNews().subscribe(data => {
      console.log(data);
      this.articles = data['articles'];
    });
  }
  goToOtherComponent() {
    this.router.navigate(['/details']);
  }
}

я попробовал программно c перейти от компонента приложения к компоненту сведений о новостях, содержащему некоторые данные но я не знаю, что не так с моим кодом ... любая помощь?

1 Ответ

0 голосов
/ 13 февраля 2020

@R.cs

Вы добавляете router-outlet в свой app.component.html на основе маршрутизатора, который будет отображаться вашим компонентом. оставьте роутер-выход в вашем app.component. html кроме того, что просто удалите в вашем компоненте.

Ссылка: https://stackblitz.com/edit/angular-6wfpnx?file=src%2Fapp%2Fapp.component.ts

...