Question

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

我为链接尝试了很多不同的结构，但无论我将其更改为控制台中的错误都说

VM39436：48 EXCEPTION：未捕获（承诺）：错误：无法匹配任何路线。网址细分：'stream'

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

在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＆amp; stream-routing.module.ts

/profile/profile.component.ts＆amp; 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文件。

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

Angular 2路由找不到路由

2 个答案: