change - dynamic title angular 5

Angular 2: enrutamiento de submódulo y<outout-outlet> anidado

Question

Estoy buscando una solución con Angular 2 para el escenario que se explica a continuación:

En este escenario, el navegador superior contiene enlaces para cargar submódulos y el navegador secundario tiene enlaces para actualizar el contenido del submódulo.

Las URL deben mapearse como:

• / home => carga la página de inicio en la salida del enrutador del componente principal
• / submodule => carga el submódulo en la salida del enrutador del componente principal y, de manera predeterminada, debe mostrar la página de inicio y la barra de navegación secundaria del submódulo
• / submodule / feature => carga la característica dentro de la salida del enrutador del submódulo

El módulo de la aplicación (y el componente de la aplicación) contiene una barra de navegación superior para navegar a diferentes submódulos y la plantilla del componente de la aplicación podría verse así

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Pero aquí está la complejidad. Necesito que mis submódulos tengan un diseño similar con una barra de navegación de segundo nivel y su propio enrutador para cargar sus propios componentes.

<sub-navbar></sub-navbar>
<router-outlet name=''sub''></router-outlet>

Probé todas las opciones y busqué en todas partes, pero no pude encontrar una solución para tener una plantilla predeterminada (como el componente de la aplicación) en el submódulo con la salida del enrutador y también cargar el contenido del submódulo en la salida del enrutador interno sin perder el subnavegación .

Agradecería cualquier aporte o idea

Answer 1

La página html se verá así.

Pagina principal

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Página de submódulo

<sub-navbar></sub-navbar>
<router-outlet name=''sub''></router-outlet>

Al hacer clic en la navegación en la barra de navegación superior, la salida de ruta principal enrutará respectivamente.

mientras hace clic en la barra de navegación secundaria, la salida del enrutador [sub] se enrutará respectivamente.

HTML está bien, el truco vendrá al escribir la aplicación.

app.routing.ts

const appRoutes: Routes = [
  {
    path: ''login'',
    component: LoginComponent
  },
  { path: ''home'',
    component: homeComponent,
    children: [
      {
        path: ''module1'',
        component: module1Component,
        children: [
          {
            path: ''submodule11'',
            component: submodule11Component,
          },
          {
            path: '''',
            redirectTo: ''submodule11'',
            pathMatch: ''full''
          }
        ]
      },
      {
        path: ''module2'',
        component: module2omponent,
        children: [
          {
            path: ''submodule21'',
            component: submodule21Component,
          },
          {
            path: '''',
            redirectTo: ''submodule21'',
            pathMatch: ''full''
          }
        ]
      }
    ]
  },
  {
    path: ''about'',
    component: aboutComponent
  }
]

Espero que te ayude.

Más detalles https://angular.io/guide/router

Answer 2

Utilizar:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Ejemplo completo:

HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: ''registers'',
        component: RegistersComponent,
        children: [
          {path: ''vehicles'', component: VehiclesComponent, outlet: ''sub''},
          {path: ''drivers'', component: DriversComponent, outlet: ''sub''},
          {path: ''bases'', component: BasesComponent, outlet: ''sub''},
          {path: ''lines'', component: LinesComponent, outlet: ''sub''},
          {path: ''users'', component: UsersComponent, outlet: ''sub''},
          {path: ''config'', component: ConfigComponent, outlet: ''sub''},
          {path: ''companies'', component: CompaniesComponent, outlet: ''sub''}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...

Answer 3

debe mencionar el nombre de la salida en las rutas, mencionar el nombre de la salida de su enrutador en la ruta como esta "salida: ''sub"

routes: Routes = [
  {path:'''', redirectTo: ''login'', pathMatch: ''full''},
  {
    path: ''login'',
    component: LoginComponent,
    
  },
  { path: ''home'',
    component: AppComponent,
      children: [
        {path: ''home/pdf'',component: SideMenuPage,outlet:"sub" },
        {path:''home/addFileUp'',component:SidePageAdd,outlet:"sub"},
        ]},
 

];