Angular2路由-手动URL导航 [英] Angular2 routing - manual url navigation

问题描述

我有一个非常简单的应用程序

I have a very simple app

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

My app.component.html looks like this:

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

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

My app.component.ts looks like this:

@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 { }

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

To navigate to my app, I go to

http://localhost/app

这可以完美地工作，它可以按预期将我导航到我的家庭组件视图. 当我点击点击我"按钮时，我会导航到

Which works perfect, it navigates me to my home component view as expected. When I click the "CLICK ME" button, I am navigated to

http://localhost/app/test

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

And my test component is rendered as expected... HOWEVER, if I manually navigate to

http://localhost/app/test

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

My home component is loaded instead of my test component...what gives? How can I set up routing so that manual navigation to the test url actually returns my test component's view in the router outlet? Is this possible? I don't want to go to the landing page every time...

推荐答案

在新的路由器规格中，您需要这样的东西:

In the new router especification you need something like this:

router.navigateByUrl("/app");

或

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

这篇关于Angular2路由-手动URL导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！