问题描述
我有一个非常简单的应用
我的 app.component.html 看起来像这样:
<a [routerLink]="['/Test']">点击我</a><div class="main-container"><路由器插座></路由器插座>
我有一个非常简单的应用
我的 app.component.html 看起来像这样:
<a [routerLink]="['/Test']">点击我</a><div class="main-container"><路由器插座></路由器插座>
我的 app.component.ts 看起来像这样:
@Component({选择器:'应用',templateUrl: 'app/app.component.html',指令:[HomeComponent、TestComponent、ROUTER_DIRECTICIVES]})@RouteConfig([{path: '/', 组件: HomeComponent, as: 'HomeComponent'},{path: '/test', 组件: TestComponent, as: 'Test'}])导出类 AppComponent { }
要导航到我的应用程序,请转到
http://localhost/app
效果很好,它按预期将我导航到我的主组件视图.当我点击点击我"按钮时,我被导航到
http://localhost/app/test
并且我的测试组件按预期呈现......但是,如果我手动导航到
http://localhost/app/test
加载的是我的 home 组件而不是我的测试组件...是什么导致的?如何设置路由,以便手动导航到测试 url 实际上返回我的测试组件在路由器插座中的视图?这可能吗?我不想每次都去登陆页面...
在新的路由器规范中,您需要这样的东西:
router.navigateByUrl("/app");
或
router.navigate(['HomeComponent'], {relativeTo: route});
I have a very simple app
My app.component.html looks like this:
<a [routerLink]="['/Test']">CLICK ME</a>
<div class="main-container">
<router-outlet></router-outlet>
</div>
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
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");
or
router.navigate(['HomeComponent'], {relativeTo: route});
这篇关于Angular2 路由 - 手动 url 导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!