Question

我尝试将永久链接添加到我的角度2应用程序，但我还没有找到方法。

我的app-routing.module.ts：

const routes: Routes = [
  { path: '', pathMatch: 'full', component: TagelerComponent },
  { path: 'tageler', component: TagelerListComponent },
  { path: 'tageler-details/:id', component: TagelerDetailsComponent },
  { path: 'group/:id', component: GroupDetailsComponent },
  { path: 'tageler/admin', component: AdminComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

我的代码看起来像这样：

<div *ngFor="let group of groups | groupTypeFilter: 'Trupp' ">
    <a  routerLink="/group/{{group._id}}">
      <li class="list-group-item">
        {{group.name}}
      </li>
    </a>
</div>

在此示例中，网址类似于：http://localhost:4200/group/5910c2282249261cc61d0a7e

我希望在不更改路由的情况下显示组的名称（例如狗），而不是组ID，因此URL会更改为：＆＃39; http://localhost:4200/group/dogs＆＃39;。

我是Angular 2的新手，所以我真的不知道这是否真的可行。

如果有人可以帮助我，我会很高兴的！

Answer 1

答案是你不能用routerLink中的名字替换id，然后按ID查询组，假设用户打开了一个新标签并输入了URL

http://localhost:4200/group/dogs

该应用将加载，您唯一的参考是dogs，ID将来自哪里？除非您已经定义了一个返回给定组名的id的字典，或者使用了一些黑魔法

但是，如果您只允许用户通过其父级访问详细信息页面，则可以使用共享服务传递组实例，并将路由器链接设置为group.name。

<div *ngFor="let group of groups | groupTypeFilter: 'Trupp' ">
  <a [routerLink]="shared.setGroupLink(group)">
    <li class="list-group-item">
      {{group.name}}
    </li>
  </a>
</div>

constructor(public shared: SharedService) { }

SharedService

中的

export class SharedService{

   currGroupId: number;

   constructor() { }

   setGroupLink(group) {
      // you can pass the object as a whole but I'll use `group.id` in this example
      // this.currGroup = group;
      this.currGroupId = group.id;
      return '/group/' + group.name;
   }
}

在 GroupDetailsComponent

中

groupId: number;

constructor(public shared: SharedService) { }

ngOnInit() {
   this.groupId = this.shared.currGroupId;
}

注意：如果用户输入http://localhost:4200/group/dogs因为groupId未定义

，则此方法无效顺便说一下，避免为变量做前缀＆＃39;使用下划线_的名称，请检查Angular Style Guide

Angular 2 - 如何添加永久链接？

1 个答案: