Angular routerLink 不执行任何操作并重定向到主页

Question

当我点击 routerLink 时没有任何反应，如果我尝试打开 link（复制到地址栏），它会将我重定向到 http://localhost:4200。

book.component.html

    <h2>Books</h2>
<ul class="books">
    <li *ngFor="let book of books">
        <a routerLink="/detail/{{book.key}}">
            {{book.key}} {{book.title}}
        </a>
    </li>
</ul>

{{book.key}} 等于这样的东西：/works/OL27448W

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'books', component: BooksComponent },
  { path: 'detail/:key', component: BookDetailComponent }
];

Answer 1

有2个解。

首先：阅读@Mikkel Christensen 评论。

第二个：这也是基于克里斯滕森写的关于附加/符号的内容。我根据这篇文章写了一个自定义管道：https://dev.to/kenan7/creating-split-custom-pipe-in-angular-3n8f。并拆分我的密钥，使其不包含该符号。 /works/OL27448W -> OL27448W 我可以这样做，因为 /works/ 部分始终相同。你可以在下面看到它。

books.component.html

<h2>Books</h2>
<ul class="books">
    <li *ngFor="let book of books">
        <a routerLink="/detail/{{book.key | split: '/' : 2}}">
            {{book.key}} {{book.title}}
        </a>    
    </li>
</ul>

split.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'split'
})
export class SplitPipe implements PipeTransform {

  transform(text: string, by: string, index: number = 1) {
    let arr = text.split(by); // split text by "by" parameter
    return arr[index] // after splitting to array return wanted index
  }
}

路线

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'books', component: BooksComponent },
  { path: 'detail/:key', component: BookDetailComponent }
];

Angular routerLink 不执行任何操作并重定向到主页

Angular routerLink does nothing and redirect to the home page

routes

angular