angular2 是否支持嵌套状态/路由? [英] Does angular2 support nested states/routes?

问题描述

angular2 是否支持嵌套状态/路由?例如，在视图端口中有 2 个链接，单击特定链接时，它将显示一个视图，该视图还有多个链接但特定于先前的链接.

解决方案

是.

我做了一些演示:http://plnkr.co/edit/IcnEzZ0WtiaY5Bpqrq2Y?p=preview

import {Component, View, Input} from 'angular2/core';进口 {RouteConfig、路由器、RouteParams、ROUTER_DIRECTIVES来自'angular2/路由器';从'./persistent-router-outlet'导入{PersistentRouterOutlet}；@成分({})@看法({模板:'这里的产品信息'})类产品信息{}@成分({})@看法({模板:'在这里购买'})类产品购买{}@成分({})@看法({指令:[...ROUTER_DIRECTIVES，PersistentRouterOutlet]，模板:`<div><h2>产品{{pid}}</h2><a [routerLink]="['Info']">显示信息</a><a [routerLink]="['Buy']">去买</a><div><路由器插座></路由器插座>

`})@RouteConfig([{路径:'/信息'，名称:'信息'，组件:产品信息，useAsDefault:true}{path: '/buy', name: 'Buy', component: ProductBuy}])类产品{进程号构造函数(参数:RouteParams){this.pid = params.get('pid')}}@成分({})@看法({指令:[...ROUTER_DIRECIVES]，模板:`店铺信息`})类商店信息{}@成分({选择器:'我的应用'，提供者:[]，指令: [...ROUTER_DIRECTIVES, PersistentRouterOutlet] ,模板:`<div><a [routerLink]="['./StoreInfo']">查看商店信息</a><a [routerLink]="['./Product', {pid:1}]">参见产品 1</a><a [routerLink]="['./Product', {pid:2}]">参见产品 2</a><div><persistent-router-outlet></persistent-router-outlet>

`})@RouteConfig([{路径:'/'，名称:'StoreInfo'，组件:StoreInfo，useAsDefault:true}{路径:'/product/:pid/...'，名称:'产品'，组件:产品}])出口类应用{}

这是文档:https://angular.io/docs/ts/latest/guide/router.html#!#child-router

请注意，持久标签存在问题:Angular2 路由:持久路由标签和子路由https://github.com/angular/angular/issues/6634

Does angular2 support nested states/routes? for example in a view port there are 2 links and on clicking a specific link it will present a view which with further have more than one link but that are specific to earlier link.

解决方案

Yes.

I made some demo: 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 {
}

Here's the doc: https://angular.io/docs/ts/latest/guide/router.html#!#child-router

Note there's a problem with persistent tabs: Angular2 Routing: persisting route tabs and child routes https://github.com/angular/angular/issues/6634

这篇关于angular2 是否支持嵌套状态/路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！