加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular2是否支持嵌套状态/路由?

发布时间:2020-12-17 08:29:35 所属栏目:安全 来源:网络整理
导读:angular2是否支持嵌套状态/路由? 例如在视图端口中有2个链接,并且在点击特定链接时,它将呈现进一步具有多于一个链接但是特定于较早链接的视图。 是。 我做了一些演示: http://plnkr.co/edit/IcnEzZ0WtiaY5Bpqrq2Y?p=preview import {Component,View,Inpu
angular2是否支持嵌套状态/路由?
例如在视图端口中有2个链接,并且在点击特定链接时,它将呈现进一步具有多于一个链接但是特定于较早链接的视图。
是。

我做了一些演示:
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,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 {
}

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

注意持久标签页有一个问题:Angular2 Routing: persisting route tabs and child routes
https://github.com/angular/angular/issues/6634

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读