子模块中的 Angular 6 路由器链接和父模块中的路由器插座（app.component）答案

【问题标题】：Angular 6 routerlink in child module and router-outlet in parent (app.component)子模块中的 Angular 6 路由器链接和父模块中的路由器插座（app.component）
【发布时间】：2018-07-27 23:30:46
【问题描述】：

我正在使用 RouterModule，但 routerLinks 有问题。

routerLinks 不起作用（锚点不可点击），因为它们位于子模块中，我不知道如何解决此问题。

层次结构：

App.Module (router-outlet) -> Elements Module -> Navi Module (routerLinks)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { ElementsModule } from './elements/elements.module';

import { LandingComponent } from './pages/landing.component';
import { GenreComponent } from './pages/genre.component';
import { SinglePostComponent } from './pages/singlepost.component';
import { ListComponent } from './pages/list.component';
import { AppComponent } from './app.component';

import { DataService } from './data.service';

@NgModule({
    imports: [
        BrowserModule,
        ElementsModule,
        HttpClientModule,
        RouterModule.forRoot([
            {path: "", component: LandingComponent},
            {path: "post/:id", component: SinglePostComponent},
            {path: "lists", component: ListComponent}
        ], {
            useHash: true,
        })
    ],
    declarations: [
        AppComponent,
        LandingComponent,
        GenreComponent,
        SinglePostComponent,
        ListComponent
    ],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<router-outlet></router-outlet>

navi.componentent.html

<a routerLink="/movies">Movies</a>

【问题讨论】：

定义“不起作用”。发布一个完整的最小示例，作为堆栈闪电战，重现问题。请注意，您的列表路由永远无法激活，因为即使/lists 也会激活流派路由。
锚点不可点击。
routerLinks -> routerLink ，是不是搞错了？
不，只是问题中的一个错字。

标签： node.js angular typescript angular6

【解决方案1】：

在我的项目中，我有一个指定用于处理路由的模块，并且我的其他模块可以导入：

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MainComponent } from './main/main.component';

const routes: Routes = [
  {
    path: '',
    component: MainComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这是由我的其他模块导入的，例如：

@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    AppRoutingModule
  ]
})
export class AppModule {}

【讨论】：

非常感谢。几个小时以来，我一直在寻找解决方案。