Angular 2路由找不到路由

Question

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

我已经为链接尝试了许多不同的结构，但无论我将其更改为控制台中的错误提示

VM39436:48 例外：未捕获（承诺中）：错误：无法匹配任何 路线。 URL 段：“流”

我使用模板布局，然后使我的页面成为这些布局的子级。一种布局是安全的，一种布局是公开的。

在 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',
            }
        ]
    }
];

现在我有一个用于配置文件的文件夹和一个用于流的文件夹。

所以当你移动到流目录时，这是 stream-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 {}

这是profile-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 // 不能从公共布局访问这个。

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

我添加此答案是为了帮助在多级路由、子路由或身份验证保护方面遇到问题的任何其他人。

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

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

这里是secure-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 { }
}

这样我可以为安全模板添加保护，将任何未经授权的流量重定向回公共模板。所以从 /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 }
];

在此示例中，流是我保留公开视图的位置，而个人资料是我所有安全视图的位置。因此，如果我想创建一个新的公共视图，我会进入流并创建一个新路由，然后创建 html 文件以及 component.ts 文件。

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