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

【问题标题】：Not able to call component from navbar component html in angular无法以角度从导航栏组件html调用组件
【发布时间】：2018-07-21 07:59:36
【问题描述】：

我创建了一个导航栏，我正在尝试调用其他模块的组件，以便我能够从导航栏链接访问不同的页面。我使用 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];

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

【问题讨论】：

可以把定期存款模块加到imports: [RouterModule.forChild(routes)],吗？如果您想使用延迟加载，那么您可能需要通过angular.io/guide/lazy-loading-ngmodules 了解示例。
你能发布主要路线的定义吗？
@AdrianFâciu 我已经尝试在主要路线上做同样的事情，我已经提到了 app.routing.ts 上面的代码
@WandMaker 我是否需要添加固定存款模块，因为我没有为它创建模块，因为我希望通过以这种方式将其定义到路由中来访问固定存款组件：{path：'fixeddeposits'，组件：FixedDepositsComponent}，
您可以为您的应用创建一个 stackblitz 版本 - 然后，有人可以看看

标签： angular components navbar angular-router

【解决方案1】：

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

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

Angular Lazy Loading

【讨论】：

我尝试进行上述更改，没有为我锻炼，当我点击按钮时没有任何错误但它没有重定向到其他组件。
这是我的代码的链接：stackblitz.com/edit/angular-i1mvx7
您指出了“routerLink”的错误，现在我清楚了路由的概念。非常感谢你，你的努力真的很有帮助！
哦，我试图为您的答案投票，但由于我的声誉低于 15，我无法投票！我一定会尽快做的