我正在使用Angular2辅助路线,我无法解决问题。
假设我们有一个基本的邮件应用程序,也有一些联系人。
基本上,我的HTML看起来像这样:
<div>
<a [routerLink]="['emails']">Emails</a>
<a [routerLink]="['contacts']">Contacts</a>
<a [routerLink]="[{outlets: {aux: ['auxiliary']}}]">Open an auxiliary route</a>
</div>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
到目前为止,它已经接近了。
/emails
正在铺设正确的/contacts
正在铺设正确的/emails(aux:auxiliary)
正在加载 /contacts(aux:auxiliary)
正在加载 当辅助设备在URL中时,我们第一次到达时就可以了
但是,如果我点击<a [routerLink]="['emails']">Emails</a>
,即使网址仍为http://localhost:4200/emails(aux:auxiliary)
,我的辅助插座也不会再显示。
所以我的问题是,如何在不更改辅助路由的情况下更改主URL? (如果没有辅助,只需转到新URL,如果是辅助,请转到URL +辅助)。
我试过了:
<a [routerLink]="['emails', {outlets: {aux: ['/']}}]">Emails</a>
<a [routerLink]="['contacts', {outlets: {aux: ['/']}}]">Contacts</a>
以及
<a [routerLink]="['emails', {outlets: {aux: ['./']}}]">Emails</a>
<a [routerLink]="['contacts', {outlets: {aux: ['./']}}]">Contacts</a>
但它也没有用。
感谢您的帮助!
PS:如果你想自己尝试一下,我的测试是在Github:
git clone https://github.com/maxime1992/angular2-nrgx-demo.git
git checkout auxiliary-route
npm i
ng serve
只需查看以下网址: http://localhost:4200/emails
编辑:
答案 0 :(得分:1)
您可以使用虚拟路线
来处理这种情况使用虚拟路由的原因是当您从/ emails(aux:auxiliary)切换到/ emails时Angular不会重新加载组件,因为主路径是相同的。所以你需要强行重新加载组件。
<a (click)="changeRoute(url)">
向路由器添加一条虚拟路由:
{ path: 'dummy', component: dummyComponent }
<强> dummyComponent.ts 强>
//Dummy component for route changes
@Component({
selector: 'dummy',
template: ''
})
export class dummyComponent{}
现在在您的组件中添加 changeRoute 功能:
changeRoute => (url){
self.router.navigateByUrl('/dummy', { skipLocationChange: true });
setTimeout(()=>self.router.navigate(['emails',{outlets: {aux: null}}]));
}
// {outlets: {aux: null}} this will set your outlet to null and clean your url to /emails
// 'skipLocationChange' will avoid /dummy to go into history API
这将重新渲染你的组件并休息所有将由Angular处理。