Question

我有一个非常简单的应用

我的app.component.html看起来像这样：

<a [routerLink]="['/Test']">CLICK ME</a>
<div class="main-container">
    <router-outlet></router-outlet>
</div>

我的app.component.ts看起来像这样：

@Component({
    selector: 'app',
    templateUrl: 'app/app.component.html',
    directives: [HomeComponent, TestComponent, ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'HomeComponent'},
  {path: '/test', component: TestComponent, as: 'Test'}
])

export class AppComponent { }

要导航到我的应用，我会转到

http://localhost/app

哪种方法很完美，它可以按预期导航到我的主组件视图。当我点击＆＃34;点击我＆＃34;按钮，我导航到

http://localhost/app/test

我的测试组件按预期呈现...但是，如果我手动导航到

http://localhost/app/test

我的家庭组件被加载而不是我的测试组件......是什么给出的？如何设置路由，以便手动导航到测试URL实际上返回路由器插座中的测试组件视图？这可能吗？我不想每次都去着陆页......

Answer 1

在新的路由器规范中你需要这样的东西：

router.navigateByUrl("/app");

或

router.navigate(['HomeComponent'], {relativeTo: route});

Answer 2

这可能是由于服务器迁移造成的。您的服务器可能会重定向到index.html以查找上下文后的任何错误路径或路径。

您应该将服务器配置为重写路径而不是重定向。

提供有关服务器代码和正在使用的服务器的更多信息

Answer 3

已解决 - 我的引导程序缺少一些内容......我有

bootstrap(AppComponent, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue(location.pathname),
  bind(LocationStrategy).toClass(PathLocationStrategy )
  ]);

然而这是不正确的，手动输入：

bootstrap(AppComponent, [
  ROUTER_BINDINGS,
  bind(APP_BASE_HREF).toValue("/"),
  bind(LocationStrategy).toClass(PathLocationStrategy )
  ]);

似乎工作。谢谢大家的帮助！

Angular2路由 - 手动网址导航

3 个答案: