angular2是否支持嵌套状态/路由？例如,在视口中有2个链接,在点击特定链接时,它将显示一个视图,该视图还具有多个链接但特定于早期链接.

角社区!

我目前正在将AngularJS应用程序重写为Angular 2.我想解决可能被描述为的问题:路由选项卡+子路由.

所以,基本上Angular 2中的Router会破坏非活动组件(我的标签!).问题是我不想要这种行为.原因是我有一些组件,如图表和数据网格,并希望快速切换它们,我不想重新创建它们.

我找到了一些解决方法来保留我的标签,同时有路由但使用这种方法我不知道如何实现子路由.我还想要一个独立于深度的解决方案(意思是:更深层次地工作)因为我有更多需要持久化的子标签.

解决方法是:我已经将一些空组件放到路由并实例化标签,我自己用[hidden]属性隐藏它们:

app.ts:

@Component({ /*...*/ })
@RouteConfig([
    {path: '/**', redirectTo: ['Dashboard']},

    {path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
    {path: '/products/...', name: 'Products', component: EmptyRoute},
    {path: '/sales', name: 'Sales', component: EmptyRoute},
    {path: '/reports', name: 'Reports', component: EmptyRoute},
])
export class App {
    constructor(private router: Router) {
    }

    public isRouteActive(route) {
        return this.router.isRouteActive(this.router.generate(route))
    }
}

app.html:

<dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard>
<products-management [hidden]="!isRouteActive(['/Products'])"></products-management>
<sales [hidden]="!isRouteActive(['/Sales'])"></sales>
<reports [hidden]="!isRouteActive(['/Reports'])"></reports>

我正在使用Cordova和AngularJS制作移动应用程序.目前我已经安装了ui-router用于路由,但我对任何其他路由选择开放.

我的愿望:我想缓存某些与参数绑定的视图.换句话说,我想缓存路径(或页面).

示例情况:假设我们看到一些仪表板页面,点击一些重定向到路径的书籍封面book/2.此路径首次加载到应用程序中.路由器重定向HomeController到BooksController(无论名称).现在BooksController加载给定的数据$stateParams(book id = 2)并创建充满所选书籍信息的视图.

在这种情况下我想要的是什么:

1. 我回到仪表板页面 - 它已经加载(缓存？)
2. 我再次选择书#2
3. 控制器或路由器注意到已加载有关此书的数据
4. 视图没有被重新创建,而是从缓存中获取

实际上,最好根据路径缓存我访问的所有内容.预加载也很酷.

原因:表现.当我打开一些书籍列表时,我希望它能够快速显示.每次创建视图时,页面更改的动画看起来很糟糕(它不是很平滑).

任何帮助,将不胜感激.

编辑:

首先,由于我认为这是许多移动HTML应用程序编程人员的常见问题,我想精确一些信息:

1. 如果可能的话,我不是在寻找黑客,而是寻找明确的解决方案.
2. 视图中的数据使用AngularJS,所以YES,有类似的东西ng-bind,ng-repeat等等.
3. 数据和DOM元素都 需要缓存.据我所知,浏览器的布局操作并不像重新创建整个DOM树那样昂贵.重画不是我们可以省略的.
4. 拥有独立的控制器是很自然的事情.因为没有它我可以离开,我无法想象它是如何工作的.

我有一些半解决方案,但我会对我的愿望严格要求.

解决方案1.

将所有视图放入一个文件(我可以使用gulp builder)并使用ng-show.这是最简单的解决方案,我不相信任何知道AngularJS的人都不会想到它.

一个很好的技巧(来自@DmitriZaitsev)是创建一个辅助函数来显示/隐藏基于当前位置路径的元素.

好处:

1. 这很简单.
2. 预加载功能.

缺点:

1. 所有视图都必须在一个文件中.不要问为什么不方便.
2. 由于这一切都与移动设备有关,有时我想"清除"内存.我能想到的唯一方法是从DOM中删除这些孩子.肮脏但还可以.
3. 我不能同时缓存/ book/2和/ book/3.我必须在每个使用参数绑定的视图的一些模板之上动态创建DOM子节点.

解决方案2.

使用来自ui-router-extras的 Sticky States和Future States 非常棒.

好处:

1. 分开的看法.
2. 非常简单的用法,非常简单,因为它只是一个插件ui-router.
3. 可以创建动态子状态.所以可以缓存book1, …

所以我有一个组件的300 个实例，它通过一个host属性定义了全局点击事件侦听器：

@Component({
  selector: 'value-edit',
  template: ``,
  host: {
    "(document: click)": "onClickOff($event)",
  },
  changeDetection: ChangeDetectionStrategy.OnPush
)
export class ValueEditComponent {
  onClickOff(globalEvent) {
    // to make sure it doesn't affect performance we keep it EMPTY!
  }
}

我注意到这会极大地影响性能，每次单击document.

这是在 Chrome 中为序列制作的 JS CPU 配置文件：等待约 5 秒，单击，等待几秒钟并停止录制。点击是屏幕截图上巨大的绿色列：

我试过在这个组件甚至父组件上分离更改检测器，但这没有帮助。只需注释掉该行即可"(document: click)": "onClickOff($event)",解决问题。

可能是框架或使用不当的问题，但我不确定如何以更良好的实践方式对此或解决方法进行限定。

在这里

GitHub 问题在这里