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

问题描述

##错误我已经在我的应用程序中实现了嵌套路由.当应用程序在登录后加载其显示登录屏幕时，它会重定向到管理页面，其中存在更多子路由，如用户、产品、api 等.现在，当我导航到管理时，它默认加载用户屏幕，但进一步 <routeLinks>不工作，它显示了这个错误.错误:未捕获(承诺):错误:无法匹配任何路线:'产品'

点击产品后，它会显示这个

##Code main.ts

import { bootstrap } from '@angular/platform-b​​rowser-dynamic';从'../app/app.routes'导入{APP_ROUTER_PROVIDERS}；从 '../app/app.component' 导入 { AppComponent };引导程序(AppComponent，[APP_ROUTER_PROVIDERS])；

##app.component

import { Component } from '@angular/core';从'@angular/router' 导入 { ROUTER_DIRECIVES };@成分({选择器:'演示应用程序'，模板:`<div class="outer-outlet"><路由器插座></路由器插座>

`，指令:[ROUTER_DIRECIVES]})导出类 AppComponent { }

##app.routes

import { provideRouter, RouterConfig } from '@angular/router';import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';从 '../app/home.component' 导入 { HomeComponent };导出常量路由:RouterConfig = [{小路: ''，组件:HomeComponent},{路径:'管理员'，组件:关于组件，孩子们: [{小路: ''，组件:关于Home组件},{路径:'/产品'，组件:关于项目组件}]}];出口const APP_ROUTER_PROVIDERS = [提供路由器(路线)];

##home.component

import { Component } from '@angular/core';@成分({选择器:'app-home'，templateUrl:'../app/layouts/login.html'})导出类 HomeComponent { }

##about.component

import { Component } from '@angular/core';从@angular/router"导入 { ActivatedRoute, ROUTER_DIRECTIVES };@成分({选择器:'关于家'，模板:`<h3>用户</h3>`})导出类 AboutHomeComponent { }@成分({选择器:'关于项目'，模板:`
product
`})导出类 AboutItemComponent { }@成分({选择器:'app-about'，templateUrl: '../app/layouts/admin.html',指令:[ROUTER_DIRECIVES]})导出类 AboutComponent { }

解决方案

我认为你的错误在于你的路线应该是 product 而不是 /product.

所以更像

 孩子:[{小路: ''，组件:关于Home组件},{路径:'产品'，组件:关于项目组件}]

##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

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

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

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

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

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

##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 { }
      

解决方案

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

So more something like

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

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