Angular2哈希url获取当前url

我定义了如下路线：

const appRoutes: Routes = [
{
  path: 'auth',
  component: AuthenticationComponent,
},
{
  path: '',
  component: HomeComponent,
  canActivate:[AuthenticationGuard],
  children:[
  {
    path: 'list',
    component: TaskListComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'create',
    component: CreateTaskComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'agreement',
    component: UserAgreementComponent,
    canActivate:[AuthenticationGuard]
  },
  ]

},

];

<nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="#/list">List</a>
    <a class="mdl-navigation__link" href="#/create">Create</a>
    <a class="mdl-navigation__link" href="#/profile">Profile <span *ngIf="profileNotPresent" mdl-badge="Start"></span> </a>
    <button class="mdl-button mdl-js-button" (click)="logout()">
        <i class="material-icons">exit_to_app</i>
    </button>
</nav>

我在它们上面导航，如下所示：

const appRoutes: Routes = [
{
  path: 'auth',
  component: AuthenticationComponent,
},
{
  path: '',
  component: HomeComponent,
  canActivate:[AuthenticationGuard],
  children:[
  {
    path: 'list',
    component: TaskListComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'create',
    component: CreateTaskComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate:[AuthenticationGuard]
  },
  {
    path: 'agreement',
    component: UserAgreementComponent,
    canActivate:[AuthenticationGuard]
  },
  ]

},

];

<nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="#/list">List</a>
    <a class="mdl-navigation__link" href="#/create">Create</a>
    <a class="mdl-navigation__link" href="#/profile">Profile <span *ngIf="profileNotPresent" mdl-badge="Start"></span> </a>
    <button class="mdl-button mdl-js-button" (click)="logout()">
        <i class="material-icons">exit_to_app</i>
    </button>
</nav>

那一次没有散列，我的URL是“/”、“/profile”等等，它过去工作正常。现在它们是“#”、“#/profile”等，这种情况不再有效，导致特定的div始终保持打开状态

---

如何修复此问题？

您需要开始使用角度路由器进行导航。我的意思是[routerLink]而不是href。如果没有#，您可能会得到404，如果您输入一个URL试图获得一个未知资源。默认情况下，Angular使用PathLocationStrategy，在这种情况下发出服务器请求

如果要使用路由器导航，可以通过配置重定向到index.html来解决此问题，然后路由器将正确导航

因此，开始正确使用路由器，并在应用程序模块中添加以下内容：

 providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}]

---

路由器将在URL中添加一个#符号，并且不会发出服务器端请求，从而导致404。但是，还是要先用routerLink指令替换您的hrefs。

文档中有一些解释-

路由器支持两种策略

PathLocationStrategy

和

HashLocationStrategy

如果使用

PathLocationStrategy

，则必须提供

APP\u BASE\u HREF

或在index.html标题中插入

---

这应该可以解决您的问题。

仅仅添加哈希就行了吗

=#/

我同意这一点，在角度应用程序中导航时必须使用

routerLink

。