错误:未捕获(承诺):错误:无法匹配任何路线Angular 2 [英] Error: Uncaught (in promise): Error: Cannot match any routes Angular 2

问题描述

##错误 我已经在我的应用程序中实现了嵌套路由.当应用程序在登录后将其重定向到管理页面后加载其显示登录屏幕时，其中进一步存在子路由，例如用户，产品，api等.现在当我导航至默认管理界面时，它会加载用户屏幕，但进一步<routeLinks>无法正常工作并显示此信息错误. Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

##Error I have implemented nested routing in my app. when application loads its shows login screen after login its redirects to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it by default loads user screen but further <routeLinks> not working and its shows this error. Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

点击产品后，它将显示此内容

After Click Product it shows this

## Code main.ts

##Code main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
import { AppComponent } from '../app/app.component';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

## app.component

##app.component

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'demo-app',
  template: `

    <div class="outer-outlet">
      <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

## app.routes

##app.routes

import { provideRouter, RouterConfig } from '@angular/router';

import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';
import { HomeComponent } from '../app/home.component';

export const routes: RouterConfig = [
  { 
    path: '', 
    component: HomeComponent
   },
  {
    path: 'admin',
    component: AboutComponent,
    children: [
      { 
        path: '', 
        component: AboutHomeComponent
       },
      { 
        path: '/product', 
        component: AboutItemComponent 
      }
    ]
  }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

## home.component

##home.component

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl:'../app/layouts/login.html'
})
export class HomeComponent { }

## about.component

##about.component

import { Component } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'about-home',
  template: `<h3>user</h3>`
})
export class AboutHomeComponent { }

@Component({
  selector: 'about-item',
  template: `<h3>product</h3>`
})
export class AboutItemComponent { }

@Component({
    selector: 'app-about',
    templateUrl: '../app/layouts/admin.html',
    directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }
      

推荐答案

我认为您的错误是您的路线应为product而不是/product.

I think that your mistake is in that your route should be product instead of /product.

更多类似

  children: [
  { 
    path: '', 
    component: AboutHomeComponent
   },
   { 
    path: 'product', 
    component: AboutItemComponent 
   }
 ]

这篇关于错误:未捕获(承诺):错误:无法匹配任何路线Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！