Angular - 在一个模块中路由两个模块

Question

我有auth.module ，在这个模块中我需要使用登录和注册模块。

我必须按钮login和register 。

这是auth.html ：

<div class="container">
<div class="login">
    <div class="form">
        <div class="formTop">
            <div class="signup-label">
                <a href="/register">register</a>
            </div>
            <div class="login-label">
                <a routerLink="/login">login</a>
            </div>
        </div>
        <router-outlet></router-outlet>
    </div>
    <div class="guide">

    </div>
</div>

这是身份验证路由：

  const routes: Routes = [
  {
    path: '',
    component: AuthComponent
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(x => x.LoginModule)
  }
];

这个page.routing.module：

  const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./cards/cards.module').then(x => x.CardsModule)
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(x => x.AuthModule)
  }
];

这个app.routing：

  const routes: Routes = [
  {
    path: '', loadChildren: () => import('./pages/pages.module').then(x => x.PagesModule)
  }
];

但是当我单击login按钮时，它会更改路由和更改页面。 我需要在点击登录或注册时更改路由但不更改页面身份验证，只需更改身份验证的内容即可。

现在我该如何解决这个问题？？？

Answer 1

你的第一条路线应该看起来像

   {
     path: '',
     component: AuthComponent
     pathMatch: 'full'
   }

查看此链接以解释为什么 pathMatch: 'full' 在这里很重要。

Answer 2

应用程序路由：

const routes: Routes =
  [
    {
      path: '', loadChildren: () => import('src/app/pages/pages.module').then(m => m.PagesModule)
    }
  ];

页面路由.模块：

const routes: Routes =
  [
    {
      path: "", redirectTo: "auth", pathMatch: "full"
    },
    {
      path: 'auth', loadChildren: () => import('src/app/pages/auth/auth.module').then(m => m.AuthModule)
    }
  ];

auth-routing.module:

const routes: Routes =
  [
    {
      path: '', component: AuthComponent
    },
    {
      path: 'login', loadChildren: () => import('src/app/pages/auth/login/login.module').then(m => m.LoginModule)
    },
    {
      path: 'register', loadChildren: () => import('src/app/pages/auth/register/register.module').then(m => m.RegisterModule)
    }
  ];

auth.component.html：

<p>
    We are in Auth Compoent , this is layout;
</p>

<div class="login">
    <div class="form">
        <div class="formTop">
            <div class="signup-label">
                <a routerLink="/auth/register">register</a>
            </div>
            <div class="login-label">
                <a routerLink="/auth/login">login</a>
            </div>
        </div>
        <router-outlet></router-outlet>
    </div>
    <div class="guide">
    </div>
</div>

登录路由模块：

const routes: Routes =
  [
    {
      path: "", component: LoginIndexComponent
    }
  ];

注册路由模块：

const routes: Routes =
  [
    {
      path: "", component: RegisterIndexComponent
    }
  ];

Stackblitz 这里