使用角度 在此输入图片描述
这是我正在使用的文件
app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ProductoListaComponent } from "./producto-lista/producto-lista.component";
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.css',
imports: \[RouterOutlet, ProductoListaComponent\]
})
export class AppComponent {
title = 'inventario-app';
}
这是App.compoment,html
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #8c0aef;">
<div class="container-fluid">
<a class="navbar-brand" href="/productos">Sistema de Inventarios</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/productos">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agregar-producto">Agregar Producto</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
app.routes我不知道错误是否在这部分,因为我的productos和agregar Producto路径完全相同
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AgregarProductoComponent } from './agregar-producto/agregar-producto.component';
import { ProductoListaComponent } from './producto-lista/producto-lista.component';
// http:localhost:4200/productos
export const routes: Routes = [
{ path: 'productos', component: ProductoListaComponent },
{ path: '', redirectTo: 'productos', pathMatch: 'full' },
{ path: 'agregar-producto', component: AgregarProductoComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutes {}
应用程序配置.服务器
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { provideHttpClient } from '@angular/common/http';
const serverConfig: ApplicationConfig = {
providers: \[
provideServerRendering(),
provideHttpClient()
\]
};
export const config = mergeApplicationConfig(appConfig, serverConfig);
应用程序配置
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import {provideHttpClient} from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideClientHydration(),
provideHttpClient()
]
};
现在我正在尝试获取下一个视图,但我不知道为什么它找不到 agregar Producto
当使用角度路由时,我们不应该使用
href
,我们必须使用routerLink
,后者的优点是,屏幕不会完全刷新并作为单页应用程序工作,href
将导致屏幕重新加载,这是非常没有角度的!
另请注意,要使
routerLink
正常工作,您必须将导入 RouterLink
或 RouterModule
添加到应用程序组件的导入数组中,如下所示!
<a class="navbar-brand" routerLink="/productos">Sistema de Inventarios</a>
<a class="nav-link active" aria-current="page" routerLink="/productos">Inicio</a>
<a class="navbar-brand" routerLink="/productos">Sistema de Inventarios</a>
import { RouterModule } from '@angular/router';
...
...
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterModule]
...
})
...