小贝子编程

URL的改变是有效的，但是路由的改变在Angular中没有发生



Url在点击时像预期的那样改变，但是特定的路由没有被加载。以下代码请参考。

<a
mat-tab-link
*ngFor="let routeLink of routeLinks; let i = index"
[routerLink]="routeLink.link"
[routerLinkActive]="'mat-tab-link-active'"
#rla="routerLinkActive"
class="mat-tab-link"
>
{{ routeLink.label }}
</a>

TS

const path = `/site/`;
this.routeLinks = [
{
key: 'network',
link: path + 'network'
},
{
key: 'subnets',
link: path + 'subnets'
}
];

这是我过去用过的。

<nav mat-tab-nav-bar>
<span
mat-tab-link
*ngFor="let routeLink of routeLinks; let i = index"
[routerLink]="nav.link"
routerLinkActive
#rla="routerLinkActive"
[routerLinkActiveOptions]="{ exact: true }"
[active]="rla.isActive"
>
{{ routeLink.label }}
</span>
</nav>
<div class="container my-3">
<router-outlet></router-outlet>
</div>

我的组件有多个路由器出口在父组件中。我分享的代码片段是子组件，因此，路由器没有按预期工作。最后，我明白了根本原因，我在父组件中像下面这样将出口添加到路由器中，解决了我的问题。

<router-outlet name="dashboard-outlet"></router-outlet>

路由TS

const routes: Routes = [{ path: '', component: ComponentName, outlet: 'dashboard-outlet' }];

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium