Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details'

Question

我想在 angular 应用程序中使用 routerLink。

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']);
  }
}

我尝试了从应用程序组件到保存一些数据的新闻详细信息组件的编程导航，但我不知道我的代码有什么问题..任何帮助？

Answer 1

@R.cs

您根据组件将呈现的路由器在 app.component.html 中添加 router-outlet。将 router-outlet 保留在您的 app.component.html 中，其他只是在您的组件中删除。

参考：https://stackblitz.com/edit/angular-6wfpnx?file=src%2Fapp%2Fapp.component.ts

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details'

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details'

angular-routing

angular

angular8