Angular 2路由找不到路由

Question

我无法理解当前的问题，即单击 routerlink 时无法加载新页面。

我为 link 尝试了许多不同的结构，但无论我将其更改为什么，控制台中的错误都显示

VM39436:48 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'stream'

我正在使用模板布局，然后使我的页面成为这些布局的子页面。一种布局是安全的，一种布局是 public.

在app.routing.ts

const APP_ROUTES: Routes = [
      {
        path: '',
        redirectTo: 'stream',
        pathMatch: 'full',
    },
    {
        path: 'profile',
        component: SecureLayoutComponent,
        data: {
            title: 'Secure Views'
        },
        children: [
            {
                path: 'Profile',
                loadChildren: 'profile/profile.module#ProfileModule'
            }
        ]
    },
    {
        path: '',
        component: PublicLayoutComponent,
        data: {
            title: 'Public Views'
        },
        children: [
            {
                path: 'stream',
                loadChildren: 'stream/stream.module#StreamModule',
            }
        ]
    }
];

现在我有一个个人资料文件夹和一个流文件夹。

所以当你移动到流目录时，这是流-routing.module.ts

import { NgModule }             from '@angular/core';
import { Routes,
         RouterModule }         from '@angular/router';

import { StreamComponent }   from './stream.component';

const routes: Routes = [
    {
        path: '',
        component: StreamComponent,
        data: {
            title: 'Stream'
        }
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class StreamRoutingModule {}

这是简介-routing.module.ts

import { NgModule }             from '@angular/core';
import { Routes,
         RouterModule }         from '@angular/router';

import { ProfileComponent }   from './profile.component';

export const routes: Routes = [
    {
        path: '',
        data: {
            title: 'Secure Pages'
        },
        children: [
            {
                path: 'profile',
                component: ProfileComponent,
                data: {
                    title: 'Profile Page'
                }
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ProfileRoutingModule {}

所以当应用程序呈现时这加载正常。但是当我尝试点击时，

  <a class="nav-link"  routerLinkActive="active" [routerLink]="['../profile/profile']">Profile</a>

或

  <a class="nav-link"  routerLinkActive="active" [routerLink]="['../profile']">Profile</a>

或

  <a class="nav-link"  routerLinkActive="active" [routerLink]="['/profile']">Profile</a>

我收到上面提到的错误，

所以从 / 目录

/app.routing.ts

/stream/stream.component.ts & stream-routing.module.ts

/profile/profile.component.ts & profile-routing.module.ts // 无法从 public 布局访问它。

Answer 1

我认为你只需要删除重定向路由

  {
    path: '',
    redirectTo: 'stream',
    pathMatch: 'full',
  },

喜欢

const APP_ROUTES: Routes = [
    {
        path: 'profile',
        component: SecureLayoutComponent,
        data: {
            title: 'Secure Views'
        },
        children: [
            {
                path: 'Profile',
                loadChildren: 'profile/profile.module#ProfileModule'
            }
        ]
    },
    {
        path: '',
        component: PublicLayoutComponent,
        data: {
            title: 'Public Views'
        },
        children: [
            {
                path: 'stream',
                loadChildren: 'stream/stream.module#StreamModule',
            }
        ]
    }
];

Answer 2

我添加这个答案是为了帮助其他在多级路由、子路由或 auth guard 方面遇到问题的人。

我在我的应用程序中使用了两个模板，

/templates/public.component.ts
/templates/secure.component.ts

这是安全的-layout.component.ts文件

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';
import { Auth }                     from './../services/auth.service';

@Component({
    providers: [ Auth ],
    selector: 'app-dashboard',
    templateUrl: './secure-layout.component.html'
})
export class SecureLayoutComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

这里是 public-layout.component.ts 文件

import { Component, OnInit }    from '@angular/core';
import { Router }               from '@angular/router';
import { Auth }                 from './../services/auth.service';

@Component({
    providers: [ Auth ],
    selector: 'app-dashboard',
    templateUrl: './public-layout.component.html'
})
export class PublicLayoutComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

通过这种方式，我可以向安全模板添加防护，将任何未经授权的流量重定向回 public 模板。所以从 /app.routing.ts 文件我为布局创建路由，然后在我创建的组件内部创建子路由，这些子路由成为相应模板的子路由。

app.routing.ts

import { Routes, RouterModule }     from "@angular/router";

import {Guard}                      from "./services/guard.service";

//Layouts
import { PublicLayoutComponent }    from './layouts/public-layout.component';
import { SecureLayoutComponent }    from './layouts/secure-layout.component';

import { STREAM_ROUTES }            from "./stream/stream.routes";
import { PROFILE_ROUTES }           from "./profile/profile.routes";

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/stream', pathMatch: 'full', },
    { path: '', component: PublicLayoutComponent, data: { title: 'Public Views' }, children: STREAM_ROUTES },
    { path: '', component: SecureLayoutComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: PROFILE_ROUTES }
];



export const routing = RouterModule.forRoot(APP_ROUTES);

/stream/stream.routes.ts

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

@Component({
  templateUrl: './stream.component.html',
})

export class StreamComponent {

  constructor() { }

}

/profile/profile.routes.ts

import { Routes } from "@angular/router";

import { ProfileComponent }   from './profile.component';

export const PROFILE_ROUTES: Routes = [
    { path: '', redirectTo: 'profile', pathMatch: 'full' },
    { path: 'profile', component: ProfileComponent }
];

在此示例中，流是我保存 public 视图的地方，个人资料是我所有安全视图的位置。因此，如果我想创建一个新的 public 视图，我将进入流并创建一个新路由，然后创建 html 文件和 component.ts 文件。

希望对您有所帮助。我认为这是处理任何应用程序路由的一种非常好的方式。

Angular 2路由找不到路由

Angular 2 Routing Not Finding Routes

typescript

mean-stack

angular