错误:秘密(承诺)：错误:不能匹配任何路由。URL段：“详细信息”

Question

我想在角应用程序中使用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']);
  }
}

我尝试了从app组件到news-details组件的编程导航，保存了一些数据，但是我不知道我的code..any帮助有什么问题吗？

Answer 1

@R.cs

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

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