navigationend - Disposición múltiple para diferentes páginas en angular 2.
router events subscribe angular 4 (4)
Estoy construyendo una aplicación angular2.
Tengo una página de inicio de sesión: solo 2 entradas (sin encabezado, sin pie de página, sin barra lateral)
cuando el usuario inicie sesión, debe navegar a una página con encabezado, pie de página y barra de navegación derecha.
Lo único que cambia en la página interna es el contenido del lado derecho.
tengo app.component
import { Component } from ''@angular/core'';
import {ViewEncapsulation} from ''@angular/core'';
@Component({
selector: ''pm-app'',
template: `
<div>
<router-outlet></router-outlet>
</div>
`,
styleUrls:["app/app.component.css"],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
pageTitle: string = ''Acme Product Management'';
}
Entiendo que este app.component es como una página maestra donde puede agregar el encabezado y el pie de página y <router-outlet></router-outlet> es donde el contenido cambia según el enrutamiento.
Mi pregunta simple es ¿cómo puedo hacer un diseño para la página de inicio de sesión y otro diseño con encabezado, pie de página y barra derecha a la página interior?
Observe la salida del enrutador. Ahí es donde se mostrará su contenido. Este es un ejemplo de mi app.component.html. En este caso, la redirección es a home.com y se muestra en la salida del enrutador.
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-g borderDiv" [ngStyle]="appPageHeaderDivStyle">
<div class="ui-g-12" *ngIf="!isLoggedIn">
<div class="ui-g">
<div class="ui-xl-2">
<img class="logo" src="./app/resources/KetoLightLogo.png">
</div>
<div class="ui-xl-7">
</div>
<div class="ui-xl-3 ui-g-nopad" style="width: 320px; margin-left: 80px; float: right; ">
<div>
<p-menubar class="pMenuBar" [model]="items"></p-menubar>
</div>
</div>
</div>
</div>
<div class="ui-g-12" *ngIf="isLoggedIn">
<div class="ui-g">
<div class="ui-xl-2">
<img class="logo" src="assets/KetoLightLogo.png">
</div>
<div class="ui-xl-4">
<label class="ui-widget loggedInLabel">Logged in as: [email protected]</label>
</div>
<div class="ui-xl-6 ui-g-nopad" style="width: 525px; margin-left: 270px; float: right; ">
<p-menubar [model]="items"></p-menubar>
</div>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-g borderDiv" [ngStyle]="appPageHeaderDivStyle">
<div class="ui-g-12">
<div class="ui-g">
<div class="ui-g-12 ui-md-12 ui-lg-12">
<div class="ui-g-row">
<div class="ui-g-12">
<div class="ui-g-12 ui-md-12 ui-lg-12">
<div class="ui-g-1 ui-md-4 ui-lg-5">
</div>
<div class="ui-g-10 ui-md-4 ui-lg-2">
<p class="copyright">Copyright 2016 Xamlware, Inc.</p>
<p class="copyright2">All rights reserved</p>
</div>
<div class="ui-g-1 ui-md-4 ui-lg-5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Podría usar rutas secundarias para usar diferentes diseños para diferentes vistas.
Este es un ejemplo común del uso de rutas secundarias en Angular2
Me gusta usar rutas secundarias para separar páginas seguras y páginas no seguras en mis aplicaciones de angular 2.
En mi raíz de aplicación tengo dos directorios
/Public
Y
/Secure
Ahora en el directorio raíz también tengo
/app.routing.ts
desde allí creo una carpeta de diseños,
/layouts
En ese directorio creo.
/layouts/secure.component.ts
/layouts/secure.component.html
Y
/layouts/public.component.ts
/layouts/public.component.html
desde este punto, puedo desviar mis rutas a uno de los dos diseños dependiendo de si la página está destinada a ser segura o pública. Lo hago creando una ruta para cada diseño en mi archivo route.ts raíz.
/app.routes.ts
const APP_ROUTES: Routes = [
{ path: '''', redirectTo: ''/home'', pathMatch: ''full'', },
{ path: '''', component: PublicComponent, data: { title: ''Public Views'' }, children: PUBLIC_ROUTES },
{ path: '''', component: SecureComponent, canActivate: [Guard], data: { title: ''Secure Views'' }, children: SECURE_ROUTES }
];
Tenga en cuenta que registro mis rutas secundarias para cada diseño. Ese es el valor exportado de cada archivo de ruta separado. Uno está en el directorio público y el otro está en el directorio seguro.
/public/public.routes.ts
export const PUBLIC_ROUTES: Routes = [
{ path: '''', redirectTo: ''home'', pathMatch: ''full'' },
{ path: ''p404'', component: p404Component },
{ path: ''e500'', component: e500Component },
{ path: ''login'', component: LoginComponent },
{ path: ''register'', component: RegisterComponent },
{ path: ''home'', component: HomeComponent },
{ path: ''benefits'', component: BenefitsComponent },
{ path: ''services'', component: ServicesComponent },
{ path: ''education'', component: EducationComponent },
{ path: ''products'', component: ProductsComponent },
{ path: ''fcra'', component: FcraComponent },
{ path: ''croa'', component: CroaComponent },
{ path: ''building'', component: BuildingComponent },
{ path: ''tips'', component: TipsComponent },
{ path: ''maintenance'', component: MaintenanceComponent }
];
Todas estas rutas son ahora accesibles como rutas secundarias para mi diseño público. Lo que ahora nos lleva a proteger nuestras vistas seguras.
Así que en el directorio seguro esencialmente hago lo mismo,
/secure/secure.routes.ts
export const SECURE_ROUTES: Routes = [
{ path: '''', redirectTo: ''overview'', pathMatch: ''full'' },
{ path: ''items'', component: ItemsComponent },
{ path: ''overview'', component: OverviewComponent },
{ path: ''profile'', component: ProfileComponent },
{ path: ''reports'', component: ReportsComponent },
{ path: ''recommendations'', component: RecommendationsComponent },
{ path: ''score-simulator'', component: ScoreSimulatorComponent },
{ path: ''payment-method'', component: PaymentMethodComponent },
{ path: ''lock-account'', component: LockAccountComponent }
];
Esto me permite usar auth para proteger esas rutas secundarias ahora. Si te acuerdas en
/app.routes.ts lo hicimos para las rutas seguras,
{ path: '''', component: SecureComponent, canActivate: [Guard], data: { title: ''Secure Views'' }, children: SECURE_ROUTES }
Note el [Guard] . Esto nos permite proteger todas las rutas secundarias para el diseño seguro. Esta es una de las razones por las que uso rutas infantiles. Podría darte mucho más, pero creo que esta es la explicación más razonable.
Solo para llevar las cosas un poco más lejos y poner esto en perspectiva para usted, así es como [Guard] las páginas seguras. Creando un servicio e implementing CanActivate
@Injectable()
export class Guard implements CanActivate {
constructor(protected router: Router, protected auth: Auth ) {}
canActivate() {
if (localStorage.getItem(''access_token'')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page
this.router.navigate([''/home'']);
return false;
}
}
Esto le permite servir diseño público con <router-outlet></router-outlet> luego usar un encabezado y pie de página diferente en el diseño. Luego, vuelva a utilizar <router-outlet></router-outlet> en el diseño seguro y, obviamente, un encabezado y pie de página diferente. Avísame si he dejado algo sin aclarar y actualizaré la respuesta.
Puede tener múltiples salidas de enrutador y redireccionamiento donde desee. Por ejemplo, la página de inicio de sesión puede ser la página de inicio si el usuario no ha iniciado sesión y si el usuario está registrado, redirige al usuario a una página maestra donde tiene encabezado y pie de página y todas las demás páginas pueden ser secundarias de ese componente. Por ejemplo tenemos nuestra aplicación como esta.
<my-app></my-app>
en mi componente tienes un
<router-outlet></router-outlet> ¨ tienes un componente de inicio de sesión y puedes usar esa ruta para esa página como esta
{ path: '''', component: LoginComponent}
Como se dijo anteriormente, esta puede ser una página de destino y no desea mostrar nada más que los detalles de inicio de sesión. Una vez que el usuario inicie sesión, redirigirá al componente maestro y el componente maestro tendrá un enrutamiento como este
{ruta: ''página maestra'', componente: MasterComponent}
y el componente maestro tendrá salida de enrutador, así
<router-outlet></router-outlet>
Ahora cuando quieras mostrar al usuario otras páginas como nosotros. entonces redirigirás al usuario a la página de nosotros como esta
{ canActivate: [AuthGuard], component: MasterComponent , path: ''masterpage'',
children:[
{ canActivate: [AuthGuard],
component: AboutUsComponent ,
path: ''aboutus''
}]
}
y de esta manera tendrá detalles como encabezado y pie de página en cualquier lugar donde navegue. ¡Espero que esto ayude!
Puedes resolver tu problema utilizando rutas infantiles.
Vea la demostración de trabajo en https://angular-multi-layout-example.stackblitz.io/ o edite en https://stackblitz.com/edit/angular-multi-layout-example
Establece tu ruta como abajo
const appRoutes: Routes = [
//Site routes goes here
{
path: '''',
component: SiteLayoutComponent,
children: [
{ path: '''', component: HomeComponent, pathMatch: ''full''},
{ path: ''about'', component: AboutComponent }
]
},
// App routes goes here here
{
path: '''',
component: AppLayoutComponent,
children: [
{ path: ''dashboard'', component: DashboardComponent },
{ path: ''profile'', component: ProfileComponent }
]
},
//no layout routes
{ path: ''login'', component: LoginComponent},
{ path: ''register'', component: RegisterComponent },
// otherwise redirect to home
{ path: ''**'', redirectTo: '''' }
];
export const routing = RouterModule.forRoot(appRoutes);
Referencia recomendada: http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html