it-swarm.com.de

Unterstützt angle2 verschachtelte Zustände / Routen?

Unterstützt angle2 verschachtelte Zustände/Routen? In einem Ansichtsfenster gibt es beispielsweise 2 Links. Wenn Sie auf einen bestimmten Link klicken, wird eine Ansicht angezeigt, die mehr als einen Link enthält, jedoch nur für einen früheren Link spezifisch ist.

43

Ja.

Ich habe eine Demo gemacht: http://plnkr.co/edit/IcnEzZ0WtiaY5Bpqrq2Y?p=preview

import {Component, View, Input} from 'angular2/core';
import {
    RouteConfig, Router, RouteParams, ROUTER_DIRECTIVES
} from 'angular2/router';
import {PersistentRouterOutlet} from './persistent-router-outlet';


@Component({})
@View({
  template: 'product info here'
})
class ProductInfo {
}

@Component({})
@View({
  template: 'buy here'
})
class ProductBuy {
}


@Component({})
@View({
  directives: [...ROUTER_DIRECTIVES, PersistentRouterOutlet],
  template: `
    <div>
      <h2>Product {{pid}}</h2>
      <a [routerLink]="['Info']">Show Info</a>
      <a [routerLink]="['Buy']">Go Buy</a>
      <div>
        <router-outlet></router-outlet>
      </div>
    </div>
  `
})
@RouteConfig([
  {path: '/info', name: 'Info', component: ProductInfo, useAsDefault: true}
  {path: '/buy', name: 'Buy', component: ProductBuy}
])
class Product {
  pid
  constructor(params: RouteParams) {
    this.pid = params.get('pid')
  }
}

@Component({})
@View({
  directives: [...ROUTER_DIRECTIVES],
  template: `
    info about the store
  `
})
class StoreInfo {
}


@Component({
  selector: 'my-app',
  providers: [],
  directives: [...ROUTER_DIRECTIVES, PersistentRouterOutlet] ,
  template: `
    <div>
      <a [routerLink]="['./StoreInfo']">See Store Info</a>
      <a [routerLink]="['./Product', {pid:1}]">See Product 1</a>
      <a [routerLink]="['./Product', {pid:2}]">See Product 2</a>
      <div>
        <persistent-router-outlet></persistent-router-outlet>
      </div>
    </div>
  `
})
@RouteConfig([
  {path: '/', name: 'StoreInfo', component: StoreInfo, useAsDefault: true}
  {path: '/product/:pid/...', name: 'Product', component: Product}
])
export class App {
}

Hier ist das Dokument: https://angular.io/docs/ts/latest/guide/router.html#!#child-router

Beachten Sie, dass es ein Problem mit dauerhaften Registerkarten gibt: Angular2-Routing: dauerhafte Registerkarten und untergeordnete Routenhttps://github.com/angular/angular/issues/6634

25
Namek

Wenn Sie mit der neuen Version des Routers verschachtelte Routen verwenden möchten, finden Sie hier ein Beispiel zum Definieren des Pfads

{
    path: 'search',
    component: SearchComponent,
    children: [
        { path: 'results/:id',  component: ResultsComponent },
    ]
}

und fügen Sie in Ihrer Vorlage für Suchkomponenten <router-outlet></router-outlet> hinzu

50
ThomasP1988