Angular 路由在 Angular 12 中不起作用

问题描述 投票：0回答：3

我在 Angular 中创建了一个 Web 应用程序，其中有组件、登录组件和注册组件。每次我将元素 routerLink 添加到 以便我从一个组件导航到另一个组件时，它都不起作用。它将文本或导航项变成只读文本。

有趣的是，如果我将其从“routerLink”更改为“href”，文本/导航项将变为活动状态。我真的不明白为什么会发生这种情况。我遵循了这个论坛中提出的与此类似的所有建议，但当我尝试它们时，没有一个真正起作用。我还遵循了 Angular.io 网站上写的建议。还是一样。我还将 RouterModule 导入到我的 app.module.ts 中。正如我们所说，它还没有发挥作用。我正在使用 Angular/CLI 12.2.0、Bootstrap 5 和 Typescript 4。下面是我的代码

<!-- Navbar-->
<nav
class="
  navbar navbar-transparent navbar-color-on-scroll
  fixed-top
  navbar-expand-lg
"
color-on-scroll="100"
id="sectionsNav"
>
<div class="container-fluid">
  <div class="navbar-translate">
    <a routerLink="#" class="navbar-brand">
      <img
        src="../../../assets/img/comgreen.png"
        width="50"
        height="50"
        alt=""
        class="d-inline-block"
      />
      <strong>Comgreen</strong></a
    >
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbar"
      aria-controls="navbar"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a
          routerLink="/login"
          routerLinkActive="active"
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target=""
          data-original-title="Log in with your credentials"
        >
          <i class="material-icons">fingerprint</i>Login
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="/user-register"
          routerLinkActive="active"
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target=""
          data-original-title="Don't have an account? Register"
        >
          <i class="fa fa-user-plus"></i>Register
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          target="_blank"
          data-original-title="Follow us on Twitter"
          rel="nofollow"
        >
          <i class="fa fa-twitter"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          routerLink="/hero"
          target="_blank"
          data-original-title="Like us on Facebook"
          rel="nofollow"
        >
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          class="nav-link"
          rel="tooltip"
          title=""
          data-placement="bottom"
          routerLink="/hero"
          target="_blank"
          data-original-title="Follow us on Instagram"
          rel="nofollow"
        >
          <i class="fa fa-instagram"></i>
        </a>
      </li>
    </ul>
  </div>
</div>
</nav>
<!--End of Navbar-->

我的app.module.ts文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {RouterModule } from '@angular/router';

import { FooterComponent } from './shared/footer/footer.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatMenuModule } from '@angular/material/menu';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SidebarComponent } from './sidebar/sidebar.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { MsgiconbtnComponent } from './shared/msgiconbtn/msgiconbtn.component';
import { SettingsService } from './services/settings.service';
import { HomeComponent } from './dashboard/home/home.component';
import { CropComponent } from './dashboard/crop/crop.component';
import { FarmersComponent } from './dashboard/farmers/farmers.component';
import { InsuranceComponent } from './dashboard/insurance/insurance.component';
import { ImagecardComponent } from './shared/imagecard/imagecard.component';
import { AddNewCropDialogModule } from './shared/dialog/add-new-crop-dialog/add-new-crop-dialog.module';
import { AddNewFarmerDialogModule } from './shared/dialog/add-new-farmer-dialog/add-new-farmer-dialog.module';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { MorecropinfoModule } from './shared/dialog/morecropinfo/morecropinfo.module';
import { UpdateCropInfoModule } from './shared/dialog/update-crop-info/update-crop-info.module';
import { SplashComponent } from './pages/splash/splash.component';
import { HeaderComponent } from './shared/header/header.component';
import { ReactiveFormsModule } from '@angular/forms';
import { userRegisterComponent } from './pages/userregister/userRegister.component';
import { VerifyEmailComponent } from './pages/verify-email/verify-email.component';
import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
import { LoginComponent } from './pages/login/login.component';
import { RegisterUserComponent } from './pages/register-user/register-user.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,    
    FooterComponent,
    SidebarComponent,
    NavbarComponent,
    MsgiconbtnComponent,
    HomeComponent,
    CropComponent,
    FarmersComponent,
    InsuranceComponent,
    ImagecardComponent,
    SplashComponent,
    userRegisterComponent,
    LoginComponent,
    VerifyEmailComponent,
    ForgotPasswordComponent,
    userRegisterComponent,
    RegisterUserComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    RouterModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    HttpClientModule,
    MorecropinfoModule,
    AddNewCropDialogModule,
    AddNewFarmerDialogModule,
    UpdateCropInfoModule,
    BrowserAnimationsModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  providers: [SettingsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我哪里出错了？

html css angular twitter-bootstrap
3个回答
2
投票

我不知道这是否会产生影响，但在我的项目中，我将 

routerLinkActive = "active"
移至 
html li
标签。 也许它也适合你...

<li class="nav-item"
    routerLinkActive="active">
    <a
      routerLink="/login"
      class="nav-link"
      rel="tooltip"
      title=""
      data-placement="bottom"
      target=""
      data-original-title="Log in with your credentials"
    >
      <i class="material-icons">fingerprint</i>Login
    </a>
  </li>
0
投票

尝试使用方括号，就像路径元素数组一样：

<a [routerLink]="['/user-register']">Link</a>

如果你想要更深入，它看起来像这样：

// const userId = '12345';
<a [routerLink]="['/user', 'profile', userId]">Link</a>

这会将您重定向到 localhost:4200/user/profile/12345

如果我们谈论链接的样式，例如悬停时下划线/颜色变化，只需使用一些CSS：

a {
 color: black;
 cursor: pointer;
}
a:hover {
 color: red;
 text-decoration: underline;
} // ...etc whatever you need
0
投票

我遇到了类似的问题，但是使用 Angular 17。我必须将 

RouterLink
添加到我的独立组件中的导入中：

@Component({
  selector: 'app-menu',
  standalone: true,
  imports: [RouterLink],
// the rest omitted for clarity })
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.