1

在 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
  },
];
4

4 回答 4

3

如果您的锚标记未变为蓝色，则表示 routerLink 未与锚标记绑定。那是因为你还没有导入RouterModule.

RouterModule注意：您必须在声明此组件的模块中导入，routerLink而不是在app.module.ts. 例如：如果你有home.component.tsinhome.module.ts并且你想使用in<a [routerLink]="[/student]"></a>然后home.component.html添加RouterModulehome.module.ts 

import {RouterModule} from '@angular/router';
@NgModule(
{ 
  ...
   import:[
     ...
       RouterModule
     ...
   ]
  ...
}
)
于 2019-12-06T09:12:26.853 回答
1

在我的 Angular 9 案例中，带有链接的组件是在共享模块中声明的。在RouterModule父模块中。所以routerLink没有工作。

当我RouterModule在共享模块中导入时它也起作用了。

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

于 2021-04-23T09:04:22.607 回答
0

试试这样：

像这样定义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>

工作演示

于 2019-12-06T08:25:59.337 回答
0

也许您只需将其添加到您的 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>

样式.css

    html {
      scroll-behavior: smooth;
    }
于 2019-12-06T09:20:34.723 回答