如何解决离子/角形嵌套路由器出口:routerLinks只工作一次
我正在尝试使用Angular's routing guide在Angular Ionic v5应用程序中实现嵌套/子路由的简单示例。我使用ionic start
创建了一个项目,并选择了blank
模板,然后创建了两个组件ChildAComponent
和ChildBComponent
。以下是home.page.html
中的相关代码段:
<div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer"
href="https://ionicframework.com/docs/components">UI Components</a></p>
<div id="stuff">
<a routerLink="child-a">Child A</a><br>
<a routerLink="child-b">Child B</a><br>
<a routerLink="404">404</a>
</div>
<div id="thing">
<router-outlet></router-outlet>
</div>
</div>
我正在尝试使用a
标签来驱动router-outlet
中呈现的组件。首次加载页面(URL:/home
)时,我可以单击其中一个链接,并在出口中渲染适当的子元素。 发生这种情况时,href
标记上的a
s(我假设Angular根据routerLink
s放置了它们) 所有更改 到导航的URL。
这样,在不重新加载页面的情况下(回到/home
),我无法单击另一个组件链接来呈现该组件。
点击链接之前(URL为/home
):
点击“子级”链接后(URL为/home/childa
):
Angular文档似乎没有表明我配置不正确,与heroes example中的路由相比,我在代码中看不到任何明显不同的地方。我在做什么错了?
如果有帮助,这里是我的home-routing.module.ts
:
import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';
import { HomePage } from './home.page';
import { ChildAComponent } from './childa/childa.component';
import { ChildBComponent } from './childb/childb.component';
const routes: Routes = [
{
path: '',component: HomePage,children: [
{
path: 'child-a',component: ChildAComponent,},{
path: 'child-b',component: ChildBComponent,]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class HomePageRoutingModule {}
GitHub: https://github.com/zrev2220/router-link-bug
解决方法
简短回答
您必须在您的RouterLink
指令中添加绝对路径:
<a [routerLink]="['/home','child-a']">Child A</a><br>
<a [routerLink]="['/home','child-b']">Child B</a><br>
详细答案
首先让我们了解RouterLink
(特别是RouterLinkWithRef
)伪指令的工作方式。它将导航到的路线取决于当前激活的路线(ActivatedRoute
)。当您点击带有RouterLinkWithRef
指令(例如selector: 'a[routerLink]'
)的元素时,这就是what happens:
/* ... */
this.router.navigateByUrl(this.urlTree,extras);
/* ... */
其中this.urlTree
被定义为getter
:
get urlTree(): UrlTree {
return this.router.createUrlTree(this.commands,{
relativeTo: this.route,// !
queryParams: this.queryParams,fragment: this.fragment,preserveQueryParams: attrBoolValue(this.preserve),queryParamsHandling: this.queryParamsHandling,preserveFragment: attrBoolValue(this.preserveFragment),});
}
我们看到的是relativeTo: this.route
,其中this.route
是injected as ActivatedRoute
。
这就是问题发生的原因:当当前路由为/home
时,在指令中注入的激活路由应不同于/home/child-*
中的路由;在这种情况下,是相同的。
因此,当用户首次登陆/home
时,在指令中注入的ActivatedRoute
将具有特定值,我们将其称为X
。但是,当用户转到/home/child-a
时,router-outlet
之外的视图将保持不变,ActivatedRoute
的值也将保持不变。这很重要,因为当处理绝对路径和相对路径路径时(提供给路由器指令的任何不带/
的路径),Angular都会遍历当前的UrlTree
(UrlTree
=以字符串形式提供的路径路径的反序列化版本),并将尝试用新部分替换旧部分。
用户导航到/home/child-a
之后,在当前的UrlTree
中将无法在指令中查找从当前ActivatedRoute
创建的旧零件,因为ActivatedRoute
不再对应于 actual 激活的路径,因此它是过时的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。