Question

我已经定义了以下路线：

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>

我不得不添加哈希，因为当我部署应用程序时，它开始为路由抛出404错误。使用散列网址可以正常工作。

然而，在我的代码中，我有一个条件，我在条件中显示div，如果它是基本路线则为真：

if(this.router.url == '/'){
    this.showHomeContent=true;
}

没有哈希的时间我的网址是＆＃39; /＆＃39;，＆＃39; / profile＆＃39;等，它过去常常工作。现在他们已经＃＆＃39;＃＆＃39;＃/ profile＆＃39;等等，这种情况不再有效，导致特定的div始终保持打开状态。

我该如何解决这个问题？

Answer 1

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

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

因此，请正确使用路由器，并在您的应用模块中添加：

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

路由器将向URL添加＃-sign，并且不会产生404的服务器端请求。但是，再次首先用routerLink指令替换你的hrefs。

Answer 2

有点在文档中解释 - PathLocationStrategy

路由器支持两种策略PathLocationStrategy和HashLocationStrategy

如果您使用PathLocationStrategy，则必须提供APP_BASE_HREF或在index.html中插入<base href="/">

这可以解决您的问题。

Angular2哈希网址获取当前网址

2 个答案: