Question

我的Angular App路由ID始终仅显示主页内容。该网址保持不变。

示例：当我尝试转到'/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>

Answer 1

您必须删除app-product，以便您的代码代替

<div class="container">
    <router-outlet></router-outlet>
<app-product>

</app-product>
</div>

应该是

<div class="container">
    <router-outlet></router-outlet>
</div>

还要@Dima指定，您需要显示AppRoutingModule的代码，可能是引起问题的原因

Here is basic routing example

始终将路由重定向到主页

1 个答案: