我的Angular App路由ID始终仅显示主页内容。 URL保持不变。
示例:当我尝试进入'/test'
页面时,仅显示主页内容。测试页内容未显示。
下面是代码。app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { RouterModule, Routes } from '../../node_modules/@angular/router';
import { TestComponent } from './test/test.component';
@NgModule({
declarations: [
AppComponent,
ProductComponent,
ProductAlertsComponent,
ProductDetailsComponent,
TestComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([
{ path:'products/:productId',component: ProductDetailsComponent },
{ path:'test',component: TestComponent },
{ path:'',component: ProductComponent},
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我也在应用程序组件中添加了路由器插座。
app.component.ts
<div class="container">
<router-outlet></router-outlet>
<app-product>
</app-product>
</div>
您必须删除app-product
,因此您的代码代替
<div class="container">
<router-outlet></router-outlet>
<app-product>
</app-product>
</div>
应该是
<div class="container">
<router-outlet></router-outlet>
</div>
还要@Dima指定,您需要显示AppRoutingModule
的代码可能是引起问题的原因