gmocamilotd
12/5/2017 - 4:46 AM

como implementar el login

angular 4 source: https://stackoverflow.com/questions/45776792/how-to-use-a-default-routes-for-login-screen-angular-4

intro4
content_copyfile_download
  • Rendered
  • Source

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!

MainComponent
content_copyfile_download
<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>
intro3
content_copyfile_download
  • Rendered
  • Source

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

Then in MainComponent:

app.component.html
content_copyfile_download
<router-outlet></router-outlet>
intro2
content_copyfile_download
  • Rendered
  • Source

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:

del router
content_copyfile_download
export const ROUTES: Routes = [
   {
      path: '',
      component: MainComponent,
      children: [
         { path: '', component: HomeComponent },
         { path: 'download', component: DownloadComponent },
         { path: 'compare', component: CompareComponent }
      ] 
   },
   { path: 'login', component: LoginComponent },
]
intro1
content_copyfile_download
  • Rendered
  • Source

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