Angular - 路由不起作用 - 错误：NG04002：无法匹配任何路由。网址段

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

抱歉我的英语不好：/ 我正在尝试使用 Angular 构建一个简单的在线商店应用程序，但到目前为止，当我尝试访问两条路线（home 和“carrinho”[购物车的葡萄牙语]）时，它会给我错误“错误：NG04002：无法匹配任何路径”路线。 URL 段' 和浏览器重定向到 localhost:4200 而不是我想要的路由。 localhost:4200/carrinho 应该显示“carrinho Works!”这句话只是为了确保它正常工作，但我遇到了错误并将我重定向到 localhost:4200，对于 home 也是如此。所以，这两个中的任何一个都在工作。 这些天我面临着不好的事情，所以我的注意力可能忽略了一些东西，我试图找到任何可能出错的地方并修复它，甚至访问了这里的几个堆栈溢出线程，但没有成功。

app-routing-module.ts - (src/app) 文件夹

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CarrinhoComponent } from './pages/carrinho/carrinho.component'
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'carrinho',
    component: CarrinhoComponent,
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

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

app-module.ts - (src/app) 文件夹

import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatGridListModule } from '@angular/material/grid-list';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTreeModule } from '@angular/material/tree';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTableModule } from '@angular/material/table';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './pages/home/home.component';
import { ProductsHeaderComponent } from './pages/home/components/products-header/products-header.component';
import { FiltersComponent } from './pages/home/components/filters/filters.component';
import { CarrinhoComponent } from './pages/carrinho/carrinho.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent,
    ProductsHeaderComponent,
    FiltersComponent,
    CarrinhoComponent,
  ],

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatGridListModule,
    MatMenuModule,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatExpansionModule,
    MatTreeModule,
    MatListModule,
    MatToolbarModule,
    MatTableModule,
    MatBadgeModule,
    MatSnackBarModule,
    HttpClientModule
  ],
  exports: [
    MatSidenavModule,
    MatGridListModule
  ]
})
export class AppModule { }

home-component.ts

import { Component } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatGridListModule } from '@angular/material/grid-list';
import { ProductsHeaderComponent } from './components/products-header/products-header.component';
import { FiltersComponent } from './components/filters/filters.component';
import { ProductBoxComponent } from './components/product-box/product-box.component';

const ROWS_HEIGHT: { [id: number]: number } = { 1: 400, 3: 335, 4: 350 };

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [ProductBoxComponent, FiltersComponent, ProductsHeaderComponent, MatSidenavModule, MatGridListModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {
  cols = 3;

  rowHeight = ROWS_HEIGHT[this.cols];

  categoria: string | undefined;

  constructor(){

  }

  ngOnInit(): void {

  }

  onColumnsCountChange(numCols: number): void {
    this.cols = numCols;
    this.rowHeight=ROWS_HEIGHT[this.cols];
  }

  onShowCategoria(novaCategoria: string): void {
    this.categoria = novaCategoria;
  }
}

应用程序组件.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './pages/home/home.component';
import { CarrinhoComponent } from './pages/carrinho/carrinho.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HomeComponent, HeaderComponent, CarrinhoComponent, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'loja';
}

应用程序组件.html


      <app-header></app-header>
      <router-outlet></router-outlet>
      <app-home></app-home>

header-component.html（带有一个使用 routerLink 进行 carrinho（购物车）路线的按钮）

<mat-toolbar class="mat-toolbar-custom max-w-7x1-mx-auto border-x justify-between">
  <a routerLink="home">Conheça a Loja</a>
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon
    [matBadge] = "1"
    [style.color]="'rgb(22, 99, 115)'"
    >shopping_cart</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <div class="p-3 divide-y divide-solid">
      <div class="pb-3 flex justify-between">
      <span class="mr-16">1 items</span>
      <br>
      <a routerLink="carrinho">Consultar Carrinho</a>
    </div>
    <div class="p-4">
      <div class="flex justify-between font-light mb2">
      Keyboard x1
      <span class="font-bold">{{ '150' | currency: 'BRL' }}</span>
      </div>
      <div class="flex justify-between font-light mb2">
        Keyboard x1
        <span class="font-bold">{{ '150' | currency: 'BRL' }}</span>
      </div>
      <div class ="flex justify-between py-3 font-light">
        Total:
        <span class="font-bold">{{ '300' | currency: 'BRL'}}</span>
      </div>
      <div class="pt-3 flex justify-between">
        <button class="bg-text-white-rounded-full w-10 h-10">
          <mat-icon>remove_shopping_cart</mat-icon>
        </button>
        <button routerLink="carrinho" class="bg-text-white-rounded-full w-10 h-10">
          <mat-icon>remove_shopping_cart</mat-icon>
        </button>
      </div>
    </div>
    </div>
  </mat-menu>
</mat-toolbar>

carrinho.component.html

<p>carrinho works!</p>

我希望实际重定向到 localhost:4200/home （显示 home 组件内的内容）和 localhost:4200/carrinho （显示 carrinho 组件内的内容，“carrinho 工作”仅用于测试目的）。

angular angular-routing
1个回答
0
投票

此路由配置创建到该路由的静态链接：

// 应用程序标题

<a routerLink="/home">Home component </a>
<a routerLink="/carrinho">Carrinho component</a>

//路由配置

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'carrinho',
    component: CarrinhoComponent,
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

注：

  • 如果第一个段以/开头，则路由器从应用程序的根目录查找路由。
  • 如果第一个段以 ./ 开头，或者不以斜线开头，则路由器会在当前激活的路由的子级中查找。
  • 如果第一个段以 ../ 开头，则路由器在路由树中上升一级。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.