Angular2默认的活动链接在网站上加载 [英] Angular2 default active link on site load

问题描述

我在每个链接上使用angular2和angular2 [routerLinkActive]来设置活动链接.这一切都很好.当用户单击链接时，该路由将变为活动状态，并且该链接将注入活动"类，因此我可以相应地设置样式.

I'm using angular2 and angular2 [routerLinkActive] on each link, to set the active link. This all works fine. When the user clicks on a link, the route becomes active and the link gets the "active" class injected and I can style accordingly.

但是，在路由设置中，我像这样设置了默认路由:

However in the route setup I set up a default route like so:

const routes: Routes = [
{ path: '', redirectTo: 'gettiingstarted', pathMatch: 'full' },

此方法的作用是，当用户首次导航到页面时，页面现在可以成功加载"gettingstarted"组件，但是不幸的是，路由器链接此时尚未注入"active"类，因此不正确风格.获得活动课程的唯一方法是实际单击链接.

This works in as far as the page now successfully loads the "gettingstarted" component when the user first navigates to the page, but unfortunately the router link has not had the "active" class injected at this point, so is not correctly styled. The only way to get the active class is to actually click the link.

有人知道我如何获得[routerLinkActive]机制以在页面加载时工作吗?

Does anyone know how I can get [routerLinkActive] mechanism to work on page load?

更新 这是链接本身的代码html:

Update Here is the code html for the link itself:

 <a [routerLink]="['gettingstarted']" [routerLinkActive]="['active']">

推荐答案

将以下内容放入app.component.ts文件的构造函数中进行修复:

Putting the following in the constructor of the app.component.ts file fixed it:

        this.router.navigate(['/gettingstarted']);

不确定这是推荐的解决方案，但针对我的情况进行了修复.

Not sure it is the recommended solution, but fixes it for my case.

这篇关于Angular2默认的活动链接在网站上加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！