错误
我在我的应用程序中实现了嵌套路由。当应用程序加载其显示登录屏幕后登录其重定向到管理页面,其他子路由存在像用户,产品,api等现在当我导航到管理它byddefault加载用户屏幕,但进一步< routeLinks>不工作,它显示这个错误。
错误:未捕获(承诺):错误:无法匹配任何路线:’product’
点击产品后显示
代码主要
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 { }
我认为你的错误在于你的路线应该是产品而不是产品。
所以更多的东西像
children: [ { path: '',component: AboutHomeComponent },{ path: 'product',component: AboutItemComponent }