Question

我有一个包含3个组件的有角项目，即：-Search，View，Insert，每个组件都有自己的路由模块和module.ts文件。但是，问题是我无法通过单击侧边栏选项从搜索导航到视图或插入。但是，如果我创建一个按钮并使用this.router.navigateByUrl('/view');，则可以转到查看页面。同样，在“插入页面”中，我也遇到同样的问题。项目结构：

布局路由文件：-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';
const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            { 
                path: '', 
                redirectTo: 'search', 
                pathMatch: 'prefix' 
            },
            {
                path: 'search', 
                loadChildren: './search/search.module#SearchModule'
            },
            {
                path: 'view', 
                loadChildren: './view/view.module#ViewModule'
            },
            {
                path: 'insert', 
                loadChildren: './insert/insert.module#InsertModule'
            },
        ]
    }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LayoutRoutingModule { }

app.module.ts

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform- 
browser/animations';
import { LanguageTranslationModule } from './shared/modules/language- 
translation/language-translation.module';
import { AngularMaterialModule } from '../app/angular-material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import {MatFormFieldModule, MatSelectModule, MatInputModule,
MatButtonModule} from '@angular/material';
import { CustomHttpService } from '../app/shared/services/custom-           
http.service';
import { UserService } from './shared/services/user.service';
@NgModule({
imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    LanguageTranslationModule,
    AppRoutingModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    MatButtonModule,
    AngularMaterialModule
],
declarations: [AppComponent],
providers: [AuthGuard, CustomHttpService, UserService],
bootstrap: [AppComponent]
})
export class AppModule {
}

Sidebar.component.html

<nav class="sidebar" [ngClass]="{ sidebarPushRight: isActive, collapsed: 
collapsed }">
<div class="list-group">
<a routerLink="/search" [routerLinkActive]="['router-link-active']" 
class="list-group-item">
  <i class="fa fa-fw fa-search"></i>&nbsp;
  <span>{{ 'Search' }}</span>
</a>
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']" 
class="list-group-item">
  <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;
  <span>{{ 'Dashboard' }}</span>
</a>
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']" 
class="list-group-item">
  <i class="fa fa-pencil-square-o" aria-hidden="true"></i>&nbsp;
  <span>{{ 'Insert' }}</span>
</a>
</nav>

Answer 1

在您的Sidebar.component.html文件中尝试用[routerLinkActive]="['router-link-active']替换[routerDirection]="'root'"

<a routerLink="/search" [routerDirection]="'root'" 
class="list-group-item">
  <i class="fa fa-fw fa-search"></i>&nbsp;
  <span>{{ 'Search' }}</span>
</a>

Answer 2

尝试这样

<a [routerLink]="['/dashboard']"
 class="list-group-item">
 <i class="fa fa-eye" aria-hidden="true"></i>&nbsp;
 <span>{{ 'Dashboard' }}</span>
</a>

有关更多信息，请参阅此https://angular.io/api/router/RouterLink#description

无法导航到Angle 7中的其他组件

2 个答案: