Question

我已经创建了一个导航栏，并且我正试图调用其他模块的组件，以便能够从导航栏链接访问不同的页面。我已经使用routerlink作为调用组件的属性。特此是用于更好理解的代码。

navbar.component.html

<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
<li><a routerlink="/fixeddeposits" routerLinkActive="active">Link</a></li>

navbar.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TableComponent } from '../table/table.component';
import { FixedDepositsComponent } from '../fixed-deposits/fixed- 
deposits.component';

const routes: Routes = [

{path: 'table', component: TableComponent},
{path: 'fixeddeposits', component: FixedDepositsComponent},
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule],
})
export class NavbarRoutingModule { }
export const routedComponents = [
TableComponent,
FixedDepositsComponent,
];

navbar.component.ts

import { Component,NgModule } from '@angular/core';
import { NavbarModule } from './navbar.module';
 @NgModule({ 
 imports:[NavbarModule],
  })   
 @Component({
  moduleId: module.id,
  selector: 'navbar',
  templateUrl: 'navbar.component.html'
  })

  export class NavbarComponent {
   title = 'app'; 
   }

navbar.module.ts

import { NgModule } from '@angular/core';
 import { NavbarRoutingModule, routedComponents } from 
 './navbar.routing.module';

 @NgModule({
   imports: [   
   NavbarRoutingModule,],
   declarations: [
    routedComponents,
   ],
   })
 export class NavbarModule { }

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TableComponent } from './table/table.component';
import { FixedDepositsComponent } from './fixed-deposits/fixed-d 
eposits.component';

const routes: Routes = [

{path: 'table', component: TableComponent},
{path: 'fixeddeposits', component: FixedDepositsComponent},
];
 @NgModule({
  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
  })
 export class AppRoutingModule {}

 export const routingComponents = [TableComponent, FixedDepositsComponent];

当我使用此代码时，我没有收到错误消息，但是当我单击导航栏按钮链接时，我没有重定向到定期存款组件。

Answer 1

路由文件不应该是单独的模块，并且存在一些语法错误，例如“ routerlink” => routerLink中的小l。

在此处更新了您的代码： https://stackblitz.com/edit/angular-ptzpjs?file=src/app/app.routing.ts

Angular Lazy Loading

无法以角度从导航栏组件html调用组件

1 个答案: