markdown como implementar el登录

Posted 2021-05-06

Notice this is the same as before. There is another router-outlet which refers to the routes of the nested children in MainComponent. Views from HomeComponent, DownloadComponent, and CompareComponent will go in here.

Cheers!

<div class="all-wrapper menu-side with-side-panel">
  <div class="layout-w">

    <mw-side-menu class="desktop-menu menu-side-w menu-activated-on-click"></mw-side-menu>
    <div class="content-w">
      <mw-header-menu></mw-header-menu>
      <div class="content-i">
        <router-outlet></router-outlet>
      </div>
    </div>

  </div>
</div>

Notice we only place router-outlet, which will hold the view for either MainComponent or LoginComponent, which can be separate

Then in MainComponent:

<router-outlet></router-outlet>

The key here is that the Routes can have children which is an array of Routes as you can see.

Your app.component.html can look like this:

export const ROUTES: Routes = [
   {
      path: '',
      component: MainComponent,
      children: [
         { path: '', component: HomeComponent },
         { path: 'download', component: DownloadComponent },
         { path: 'compare', component: CompareComponent }
      ] 
   },
   { path: 'login', component: LoginComponent },
]

One quick way I can think of is to change the structure of your routes to something like this: