Jak przełączać układy w Angular2

Question

Jaki jest najlepszy sposób korzystania z dwóch całkowicie różnych układów w tej samej aplikacji Angular2? Na przykład na mojej trasie/logowaniu chcę mieć bardzo proste pole horyzontalnie i pionowo, dla każdej innej trasy chcę mieć pełny szablon z nagłówkiem, treścią i stopką.

Answer 1

W swoim głównym komponencie html możesz dodać następujący punkt docelowy, którego użyjesz do zmiany układu.

<router-outlet name="header"></router-outlet> 
<router-outlet name="navbar"></router-outlet> 
<router-outlet></router-outlet> 
<router-outlet name="footer"></router-outlet> 

W tym przypadku możesz skonfigurować trasy, aby zmienić nagłówek, navbar, jeśli taki istnieje, i stopkę aplikacji po zmianie strony. Poniżej znajduje się przykład konfiguracji tras.

Przykład 1 Załóżmy pierwszy układ ma tylko nagłówek i stopkę bez bocznego paska nawigacyjnego/

export const welcome_routes: RouterConfig = [ 
    { path: 'firstpage', children:[ 
    { path: 'login', component: LoginComponent}, 
    { path: 'signup', component: SignupComponent}, 
    { path: '' , component: Header1Component, outlet: 'header'} 
    { path: '' , component: Footer1Component, outlet: 'footer'} 
    ]} 
]; 

Przykład 2. Jest swoich tras config dla drugiego układu

export const next_layout_routes: RouterConfig = [ 
    { path: 'go-to-next-layout-page', children:[ 
    { path: 'home', component: HomeComponent}, 
    { path: '' , component: Header2Component, outlet: 'header'} 
    { path: '' , component: NavBar2Component, outlet: 'navbar'} 
    { path: '' , component: Footer2Component, outlet: 'footer'} 
    ]} 
]; 

Z to bardzo łatwo dodać trzeci i czwarty i ... układ do strony.

Nadzieja to pomaga

** Updated **

RouterConfig została zmieniona na trasach.

więc powyższy kod będzie teraz

export const welcome_routes: Routes = [ 
    { path: 'firstpage', children:[ 
    { path: 'login', component: LoginComponent}, 
    { path: 'signup', component: SignupComponent}, 
    { path: '' , component: Header1Component, outlet: 'header'} 
    { path: '' , component: Footer1Component, outlet: 'footer'} 
    ]} 
]; 

Answer 2

Gorąco polecam lekturę samouczka zespołu Angular na temat trasowania here.

Istnieje kilka konfiguracji, które będą potrzebne do wdrożenia, ale niektóre z kluczowych etapów są:

• Załóż app.routes.js plik gdzie podać nazwę trasy i element, który powinien być ładowane po trafieniu tej trasy.

  import { provideRouter, RouterConfig } from '@angular/router'; 
  import { LoginComponent } from 'components/login.component' 
  
  const routes: RouterConfig = [ 
      { 
      path: '/login', //name of the route 
      component: LoginComponent //component to load when route is hit 
      } 
  ]; 
  
  export const appRouterProviders = [ 
      provideRouter(routes) 
  ]; 
  

• W składnika głównego, gdzie można kliknąć link (czyli nav-bar), trzeba dodać 'myRouteName' [routerLink] = (np '/ login') i parę routerem - znaczniki outletów, w których wstawiany jest nowy komponent (widok aka).

  import { Component } from '@angular/core'; 
  import { ROUTER_DIRECTIVES } from '@angular/router'; 
  
  @Component({ 
      selector: 'nav-bar', 
      template: ` 
      <h1>{{title}}</h1> 
      <a [routerLink]="['/login']">Login</a> 
      <router-outlet></router-outlet> 
      `, 
      directives: [ROUTER_DIRECTIVES] 
  }) 
  export class AppComponent { 
  
  } 
  

nadzieję, że pomoże. W ciągu ostatniego miesiąca uczyłem się kanciastości 2, a dokumentacja na temat angular.io była nieoceniona. Bardzo jasne, szczegółowe wyjaśnienia na wiele aspektów i dobry pierwszy przystanek podczas wchodzenia w nowy temat.

Answer 3

Innym prostym sposobem jest zdefiniowanie dzieci tras:

const appRoutes: Routes = [ 
    { 
    path: 'fullLayout', 
    component: FullLayoutComponent, 
    children: [ 
     { path: 'view', component: HomeComponent }, 
    ] 
    }, { 
    path: 'simpleLayout', 
    component: SimpleLayoutComponent, 
    children: [ 
     { path: 'view', component: HomeComponent }, 
    ] 
    } 
]; 

/fullLayout/Widok - pokazuje pełną strukturę układ

/simpleLayout/widoku - pokazuje prostą strukturę układu:

app.component.html

<router-outlet></router-outlet> 

pełnym layout.component.html

<h1>Full layout</h1> 
<router-outlet></router-outlet> 
<h1>FOOTER</h1> 

proste layout.component.html

<h1>Simple layout</h1> 
<router-outlet></router-outlet> 

Answer 4

W kątowe 4 (i prawdopodobnie również w Kątowymi 2) można zrobić:

const routes: Route[] = [ 
    {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'}, 
    { 
    path: 'admin', 
    children: [ 
     { 
     path: '', component: DefaultLayoutComponent, 
     children: [ 
      {path: 'dashboard', component: DashboardComponent} 
     ] 
     }, 
     { 
     path: '', 
     children: [ 
      {path: 'login', component: LoginComponent} 
     ] 
     } 
    ] 
    } 
] 

Za pomocą path: '' nie będziesz musiał wymyślać różnych przestrzeni nazw w celu użycia prostego układu. To właśnie poglądy wyglądać następująco:

index.html:

<router-outlet> 

default-layout.html:

<div class="sidebar"></div> 
<div class="content"> 
    <router-outlet></router-outlet> 
</div>