Question

我觉得这应该是非常直接的，但我似乎无法弄清楚这一点。

我有一堆根路由，例如login，events等。我决定为我的主菜单MainMenuModule创建一个导出MainMenuComponent的模块}，MainMenuModule被导入我的根应用程序模块。

<menu>
    <a routerLink="/">Home</a>
    <a routerLink="/events/">Events</a>
    <a routerLink="/register/">Register</a>
    <a routerLink="/login/">Login</a>
</menu>

我的根路由模块：

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

import { OrgHomeComponent } from './org-home/org-home.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
    { path: '', component: OrgHomeComponent },
    { path: 'login', component: LoginComponent }
];

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

MainMenuModule没有路由;主菜单中的链接应该触发应用程序的其他部分。

但是，当我点击任何链接时，路线不会改变。如果我直接在我的根应用程序组件中包含相同的链接，它工作正常，这让我认为这是因为它在一个单独的模块中，但这对我来说没有意义，因为链接必然存在于嵌套模块中/组件。

关于路线/路线链接的工作方式，我有什么遗漏吗？

如果这会产生影响，我会通过角度cli生成我的骷髅。

Answer 1

基本上，您正在尝试在此处实施功能模块。

首先尝试删除＆＃39; /＆＃39;在routerlink中的路径名后面签名，如下所示。并且，了解添加routerLink="/something"和routerLink="something"

之间的区别

<menu>
    <a routerLink="/">Home</a>
    <a routerLink="/events">Events</a>
    <a routerLink="/register">Register</a>
    <a routerLink="/login">Login</a>
</menu>

进一步说明 -

这是您的路由文件看起来很相似的方式。

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

import { MainMenuComponent} from './path...';
import { ExampleAComponent } from './path..';
import { ExampleBComponent } from './path..';

const routes: Routes = [
  {
    path: 'main-menu',
    component: MainMenuComponent,
    children: [
      { path: 'ex-a', component: ExampleAComponent },
      { path: 'ex-b', component: ExampleBComponent },
      { path: '', redirectTo: 'path-a', pathMatch: 'full' },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

确保您的路由模块已导入MainMenuModule。

EX- 如果router-outlet位于MainMenuComponent中，则添加routerLink="ex-a"将适用于路径更改。请谨慎使用 / - 反斜杠

然后，在根模块中导入MainMenuModule。（可能命名为AppModule）

如果您一直遵循所有这些步骤，它应该可以正常工作。

Answer 2

如果我错了，我希望有人会纠正我，但当然，我忽略了由于MainMenuModule没有路由模块，我需要将RouterModule导入MainMenuModule所以它可以识别路线。将其添加到MainMenuModule导入似乎已经奏效。

从不同模块更改根路由

2 个答案: