我正在使用 angular 7，當我單擊錨點按鈕時，routerLink 不起作用

Question

在 angular 7 中，我定義了不同的組件應用程序文件夾並在路由中定義組件很好，當我在 url 中定義路由器名稱時，工作正常向我顯示附加到該 url 的組件，但是當我在錨標簽中定義路由名稱時，單擊錨定它，這里不起作用是我的 html 代碼

<li class="nav-item">
  <a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item @@about">
  <a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item @@blog">
  <a class="nav-link" routerLink="/blog">BLOG</a>
</li>

這是我的路由器

const routes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  },
];

Answer 1

如果您的錨標記沒有變成藍色，則表示 routerLink 未與錨標記綁定。 這是因為您沒有導入RouterModule 。

注意：您必須在聲明此組件的模塊中導入RouterModule ，您要在其中添加routerLink而不是在app.module.ts 。 例如：如果你有home.component.ts在home.module.ts和要使用<a [routerLink]="[/student]"></a>在home.component.html然后加入RouterModule在home.module.ts

import {RouterModule} from '@angular/router';
@NgModule(
{ 
  ...
   import:[
     ...
       RouterModule
     ...
   ]
  ...
}
)

Answer 2

在我的 angular 9 案例中，帶有鏈接的組件是在共享模塊中聲明的。 RouterModule在父模塊中。 所以routerLink沒有工作。

當我在共享模塊中導入RouterModule時它也起作用了。

如果您正在使用ng serve ，您可能需要重新啟動它。

Answer 3

像這樣嘗試：

像這樣定義RouterModule ：

RouterModule.forRoot([
  { path: 'home', component: HomeComponent },
  { path: 'blog', component: BlogComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: 'home' }
])

模板：

<li class="nav-item">
    <a class="nav-link" routerLink="/home">Home</a>
  </li>
  <li class="nav-item @@about">
    <a class="nav-link" routerLink="/about">About</a>
  </li>
  <li class="nav-item @@blog">
    <a class="nav-link" routerLink="/blog">BLOG</a>
  </li>  
<router-outlet></router-outlet>

注意：您必須添加<router-outlet></router-outlet>

工作演示

Answer 4

也許您只需要將此添加到您的 app-routing.module ：

    const routerOptions: ExtraOptions = {
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled',
        scrollOffset: [0, 64],
      };

並在您的進口：

    imports: [CommonModule, RouterModule.forRoot(routes, routerOptions)]

以一種簡單的方式在 app.componenet.ts 中滾動到 Route Change 的頂部：

      onActivate() {
        window.scrollTo(0, 0);
      }

app.component.html :

    <router-outlet (activate)="onActivate()"></router-outlet>

樣式文件

    html {
      scroll-behavior: smooth;
    }