我已经成功实现了AuthGuardService，如果用户未登录，它将限制对受保护路由的访问。

我想要实现的是，如果用户已经登录并访问了登录路由，我希望它重定向到另一个路由，例如主页。

对我来说使用嵌套路由的原因是动态处理每个页面的图标和后退按钮。我有抽象路由，因为当我单击后退按钮时，路由参数消失，我放置一个抽象路径来保留id并questionnaire在 url 中键入参数。我的抽象路径是Questionaire

 { path: 'Home', component: HomeComponent,data:{icon:'fa-home'} },
 { path: 'QuestionaireList', component: QuestionaireListComponent,data:{icon:'fa-list-ul',previousState:'/Home'} },
 { 
      path: 'Questionaire/:questionnaireType/:id',
      children:[ 
      { path: 'AddQuestionnaire', component: CreateQuestionnaireComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'} },
      { path: 'UpdateQuestionnaire', component: EditComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
      { path: 'QuestionList', component: QuestionListComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
      { path: 'ImportQuestion',    component: ImportQuestionComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'}  },
      { path: 'MetaContentList', component: MetaContentListComponent,data:{icon:'fa-database',previousState:'/QuestionaireList'} },
      { path: 'ModifyMetaContent/:metaContentId/:title', component: ModifyMetaContentComponent,data:{icon:'fa-database',previousState:'/MetaContentList'}},
    ]}

另外，在questionnaire.list.html我通过 routerlink 链接到每条路径时，下面是我的链接：

[routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']"

这是我的链接：

 <a  class="primary small ui icon button" [routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']" >
                <i class="edit   icon"></i>
              </a>

我预计当我点击链接时我会路由到这个地址： …

我想替换成角度4的图像单击时的整个页面内容。我有2个HTML组件，想要从一个组件重定向到另一个。这两个组件都具有不同的标题和内容。

请找到两种布局的SS： 主组件结果布局：

详细信息组件结果布局：

我想从首页重定向到点击首页链接的详细信息。因此，在单击“主页”组件链接时，应显示详细信息组件，而应隐藏“主页”组件。

请找到我的app.module.ts路由

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth/auth.guard';
import { AdminComponent }      from './admin/admin.component';
import { DashboardComponent } from './dashboard/Dashboard.component';
import { HomeComponent } from './home/home.component';
import { AppComponent } from './shell/app.component';
import { AppDetailsComponent } from './app-details/app.details.component';

const appRoutes: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'details',
        component: AppDetailsComponent
    },
    {
        path: '',
        pathMatch: 'full',
        redirectTo:'/home'
    },
    { …

我在一个 Angular 4 项目上工作，作为同一解决方案中的 asp.net MVC 和 API 的前端，当我设置路线时，出现上述错误。我的代码如下

import { NgModule } from '@angular/core';
  import { CommonModule   } from '@angular/common';


 import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from 
'../../Components/dashboard/dashboard.component';
 import { TraitComponent } from '../../Components/trait/trait.component';

  const routes: Routes = [
     { path: ' ', redirectTo: '/dashboard', pathMatch: 'full' },
     { path: 'dashboard', component:DashboardComponent  },
     { path: 'Trait', component: TraitComponent },
      //{ path: 'heroes', component:  }
    ];
     @NgModule({
      imports: [
       RouterModule.forRoot(routes) ,
                                      CommonModule
                                                         ],

exports: [RouterModule], …

我面临着延迟加载的路由器导航问题。如果有人澄清下面的问题，我将不胜感激。谢谢。

app-routing.module

const routes: Routes = [
{ path: 'home', component: HomeComponent},
{ path: Details, loadChildren: 'pathToDetailsModule'}
];

details.module.ts

const routes: Routes = [
{
  path: '', component : DetailsComponent,
   childern : [
    {path: '' , redirectTo: prodType},
    {path: prodType , loadChildren: pathtoModuleProd},
    {path: CusDetails, loadChildren: pathtoModuleCustomer},
    {path: EmpDetails, loadChildren: pathToModuleEmp}
   ]
},
];

最初，当我单击 Details (app-routing.module) 时，DetailsModule 会默认获取 load 和 DetailsComponent 并重定向到 prodType。我的页面显示 ProdType(child)。现在我想导航到 CusDetails。

问题：

#1.

这一点

currentRoute =  this.activatedRoute.snapshot.url[0].path

正在给出结果Details（父母）而不是prodType（孩子）。延迟加载模块是否添加了空路径？现在我在孩子上 -prodType并且想要导航到孩子 …

我试图基于亲子概念导航我的Angular应用程序。在加载时，父组件（而不是子组件）被加载，但网址似乎

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'solutions', component: SolutionComponent,
    children: [
      { path: 'cog', component: CogComponent }
    ]
  },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', component: PortfolioComponent }
];

当我运行solutions/cog它重定向到，SolutionComponent但它应该加载CogComponent

编辑：1

当我使用它会工作

const appRoute: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'solutions', component: SolutionComponent },
  { path: 'solutions/cog', …