在 Angular 中，我可以为两个不同的路径使用相同的模块吗？

Question

我在 Angular 8 中实现延迟加载，但卡在了中间。对于登录和注销，我使用了如下相同的模块。

    const myroutes : Routes = [        
        {path : 'login',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},       
        {path : 'logout',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},
        {path : 'contact',loadChildren:()=>import('./contact/contact.module').then(m=>m.ContactModule)},
        {path : 'home',loadChildren : ()=> import('./home/home.module').then(m=>m.HomeModule)},
     ]

并在 login.module.ts 中使用

const myroutes : Routes = [
  {path : '',component : LoginComponent},
  {path : 'logout',component : LogoutComponent}
]

包含所有 link 的模板如下所示

<nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                    <a class="nav-link" routerLink="home">Home</a>
            </li> 
            <li class="nav-item">
                    <a class="nav-link" routerLink="contact">Contact</a>
            </li>
            <li class="nav-item">
                    <a class="nav-link" routerLink="login">Login</a>
            </li>
            <li class="nav-item">
                        <a class="nav-link" routerLink="logout">logout</a>
            </li>
        </ul>
      </nav>
<router-outlet></router-outlet>

但是每当我点击注销时 link 不会进入 LogoutComponent.ts 总是调用登录组件。

可能发生了什么？

Answer 1

注销组件的正确路径是登录和注销的串联，因此：

/login/logout

所以你的routerLink变成这样：

routerLink="login/logout"

Answer 2

你的注销组件应该是/login/logout而不是/logout，它加载登录模块，并且不需要加载登录模块两次因为注销是一个child的登录路由

注销路由从主路由中移除

 const myroutes : Routes = [        
        {path : 'login',loadChildren:()=>import('./login/login.module').then(m=>m.LoginModule)},       
        {path : 'contact',loadChildren:()=>import('./contact/contact.module').then(m=>m.ContactModule)},
        {path : 'home',loadChildren : ()=> import('./home/home.module').then(m=>m.HomeModule)},
     ]

将路由器 link 更改为 routerLink="login/logout"

-

<nav class="navbar navbar-expand-sm bg-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                    <a class="nav-link" routerLink="home">Home</a>
            </li> 
            <li class="nav-item">
                    <a class="nav-link" routerLink="contact">Contact</a>
            </li>
            <li class="nav-item">
                    <a class="nav-link" routerLink="login">Login</a>
            </li>
            <li class="nav-item">
                        <a class="nav-link" routerLink="login/logout">logout</a>
            </li>
        </ul>

我添加了一个 stackblitz URL 供您参考

https://stackblitz.com/edit/angular-ea742m

在 Angular 中，我可以为两个不同的路径使用相同的模块吗？

In Angular, can I use same module for two different path?

angular-routing

angular