Ok, je vais faire un essai...
Routes
La création d'itinéraires peut se faire de plusieurs manières. Vous pouvez utiliser des routes enfant ou servir le composant directement.
Si vous voulez servir le composant directement, ce serait idéal,
{ path: '*pathInURL*', component: *NameComponent* }
Les problèmes directs auxquels vous êtes confrontés
Trois problèmes,
-
Afficher un composant en tant qu'enfant.
-
Afficher un composant dans un modèle appelé fullwidth
-
Afficher un composant dans un modèle appelé mediumwidth
Dans votre routes.ts
const APP_ROUTES: Routes = [
// landing page of your application
{ path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
{ path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
{ path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
{ path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];
Cela va transmettre tous les chemins dans l'URL à regarder à ces routes. Il vérifiera les routes pour voir dans quel modèle il se trouve.
Créez ensuite 3 répertoires.
/blank
/complet
/moyen
Dans ces dossiers, vous conserverez vos composants qui utilisent chacun des modèles mères.
Donc, puisque le login est vide. Il serait dans /blank
/blank/BlankComonent.ts
De plus, dans chacun de ces répertoires, vous créerez un fichier routes qui sera référencé dans le fichier routes initial que nous avons déjà créé.
/blank/blank.routes.ts
export const BLANK_ROUTES: Routes = [
{ path: 'login', component: LoginComponent }
];
Puis, au milieu, la même chose,
/blank/blank.routes.ts
export const MEDIUM_ROUTES: Routes = [
{ path: 'Some/Path', component: SomeMediumComponent }
];
Et ensuite la même chose pour FULL_ROUTES
Faites un fichier routes pour chaque répertoire que nous avons créé. Ajoutez toutes vos routes qui se trouvent dans le même répertoire et qui partageront le même modèle mère.
Ensuite, nous allons créer un répertoire de modèles. Appelez-le /layouts
Dans cette direction, c'est ici que vous allez créer
BlankComponent.ts FullComponent.ts MediumComponent.ts
Chacun de ces composants aura ses routes correspondantes servies à l'intérieur de ces modèles. Parce que rappelez-vous notre premier routes fichier dit que nous servirons tous Child Routes à ces templates .
Ainsi, les mises en page seront servies à la router-outlet
import { Component } from '@angular/core';
@Component({
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
}
