Angular 2的路由不能找到路由

Question

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

我已经尝试了许多不同的结构的链接，但无论我改变它在控制台的错误说

VM39436:48 EXCEPTION: Uncaught (in promise): Error: Cannot match any路线。URL段:'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目录时这就是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.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 }
];

在这个例子中，流是我保存公共视图的地方，而profile是我所有安全视图的地方。因此，如果我想创建一个新的公共视图，我会进入流，创建一个新的路由，然后创建html文件和组件。ts文件。

我希望这是有帮助的。我认为这是一个很好的方式来处理任何应用程序的路由。