将你的路由数组移出模块

Question

我是 angular 的新手，我正在学习 angular 中的路由。制作了一个几乎没有组件的基本应用程序并尝试了路由。但问题是无法识别链接并且控制台出现错误，试图查看互联网，但对我来说一切似乎都很好。请告诉我哪里需要更正代码。

app.routing-module.ts 类：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { RegistrationComponentComponent } from './registration-component/registration-component.component';
import { UsersComponentComponent } from './users-component/users-component.component';

const routes: Routes = [];

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

   routes: Routes  = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: AppComponent },
    {path: 'registration', component: RegistrationComponentComponent},
    {path: 'login', component: LoginComponentComponent},
    {path: 'users',component: UsersComponentComponent}
  ];
}

app-component.html 元素：

<div class="container" style="background-color: grey;">
  <div class="row">
    <div class="col-md-12">
      <div class="card bg-dark my-5">
        <div class="card-body">
          <h2 class="card-title text-center text-white py-3">{{ title }}</h2>
          <ul class="text-center list-inline py-3">
            <li class="list-inline-item">
              <a routerLink="registration" class="btn btn-info">Registration</a>
                </li>
            <li class="list-inline-item">
              <a routerLink="login" class="btn btn-info">Login User</a>
                </li>
                <li class="list-inline-item">
                  <a routerLink="users" class="btn btn-info">Existing Users</a>
                    </li>
          </ul>
        </div>
      </div>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

和 app-module.ts 类：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UsersComponentComponent } from './users-component/users-component.component';
import { RegistrationComponentComponent } from './registration-component/registration-component.component';
import { LoginComponentComponent } from './login-component/login-component.component';

@NgModule({
  declarations: [
    AppComponent,
    UsersComponentComponent,
    RegistrationComponentComponent,
    LoginComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

首先初始化一个 const array 类型的 Routes

    const routes: Routes = [];

之后，您尝试将数组设置为其他内容。

    routes: Routes  = [
        {path: '', redirectTo: 'home', pathMatch: 'full'},
        {path: 'home', component: AppComponent },
        {path: 'registration', component: RegistrationComponentComponent},
        {path: 'login', component: LoginComponentComponent},
        {path: 'users',component: UsersComponentComponent}
      ];

除了两个 routes 列表不同的事实之外，由于范围的原因，您不会收到以下错误。

如果你尝试摆弄你会得到以下错误，

<块引用>

类型错误：赋值给常量变量。

我只是指出这一点，因为将变量声明为 const 并稍后更改其值将不起作用，因为它被声明为常量。

重试，从一开始就将数组初始化为其默认值。

您可以查看官方的 angular 文档，here。

Answer 2

您的路由配置看起来不错，但是，请确保在 <base href="/"> 文件中的 <head> 标记的开头有一个 index.html 标记。

Answer 3

将你的路由数组移出模块

而不是const routes = []; 放

  const routes: Routes  = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: AppComponent },
    {path: 'registration', component: RegistrationComponentComponent},
    {path: 'login', component: LoginComponentComponent},
    {path: 'users',component: UsersComponentComponent}
  ];

错误：无法匹配任何路由。 URL 段 <路由链接>

3 个答案:

将你的路由数组移出模块