Question

我正在查看一个包含三个顶级组件的Angular2应用程序。引导的应用程序组件具有标题，侧边栏和形成页面主体的路由器出口。我希望标题和侧边栏成为应用程序的永久功能，并使用路由器来控制正文中显示的内容。

<div>
  <app-header></app-header>
</div>

<div>
  <app-sidebar></app-sidebar>
</div>

<div>
  <router-outlet></router-outlet>
</div>

所以我正在寻找侧边栏能够实现......

<p><a [routerLink]="['/thing1']">Sidebar -> thing1</a></p>

<p><a [routerLink]="['/thing2']">Sidebar -> thing2</a></p>

...并让路由器在页面的指定部分显示此组件或该组件。我很不清楚应用程序需要什么级别的路由器，RouteConfig，ROUTER_DIRECTIVES。我已经使用angular-cli的脚手架添加了thing1 / thing2路由，如果我不包含routerLink指令，应用程序至少会编译 - @Routes似乎有效并且所有内容都加载。

有没有更好的方法来做我想做的事情？

Answer 1

你需要

jquery-ui-autocomplete在包含@Routes()（<router-outlet></router-outlet>或@RouteConfig()或Angular2 beta）

router-deprecated

provide: [ROUTER_DIRECTIVES]

<a [routerLink] ...
<router-outlet></router-outlet>当你想要强制导航（Router）或使用this.router.navigateXxx()类的其他功能时

如果上面的HTML在一个视图中，那么

Router

应该与新的RC.1路由器一起使用。如果<a [routerLink]="['thing1']">Sidebar -> thing1</a> <a [routerLink]="['thing2']">Sidebar -> thing2</a>和thing1是顶级路线，则前缀为thing2的路径也适用（下面示例相同）

对于路由器已弃用，您需要类似

的内容

其中<a [routerLink]="['Thing1']">Sidebar -> thing1</a> <a [routerLink]="['Thing2']">Sidebar -> thing2</a>是路线的名称。

（不确定，因为您提供的信息

Answer 2

查找指定的出口：

http://vsavkin.tumblr.com/post/145672529346/angular-router

而不是<app-sidebar></app-sidebar> 你会使用：<router-outlet name="sidebar"></router-outlet>

然后在您的路线路径中：

{
    path: 'thing1',
    component: Thing1Component,
    outlet: 'sidebar'
}

让一个组件路由成为兄弟姐妹

2 个答案: