Question

我正在开发一个小的Angular材质应用程序。我使用路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppProduitImmobilierDetailsComponent} from './app-produit-immobilier-details/app-produit-immobilier-details.component';
import { AppListProduitImmobilierComponent } from './app-list-produit-immobilier/app-list-produit-immobilier.component';

const routes: Routes = [{
    path: '',
    redirectTo: '/listproduitimmobilier',
    pathMatch: 'full' }, {
      path: 'listproduitimmobilier',
      component: AppListProduitImmobilierComponent,
      children: [
        {
          path: 'details/:id',
          component: AppProduitImmobilierDetailsComponent
        }
      ]
  }];

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

我将其导入AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { MaterialModule } from './material/material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppProduitImmobilierDetailsComponent } from './app-produit-immobilier-details/app-produit-immobilier-details.component';
import {enableProdMode} from '@angular/core';
import 'hammerjs';
import { AppListProduitImmobilierComponent } from './app-list-produit-immobilier/app-list-produit-immobilier.component';
enableProdMode();
@NgModule({
  declarations: [
    AppComponent,
    AppProduitImmobilierDetailsComponent,
    AppListProduitImmobilierComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在AppListProduitImmobilierComponent中，我导航到与AppProduitImmobilierDetailsComponent组件相对应的子路线

   goToDetailsView(annonce: ProduitImmobilierDTO) {
      this.router.navigate(['/listproduitimmobilier/details/' + annonce.id]);
    }

但它不会停留在与AppProduitImmobilierDetailsComponent组件相对应的子路径上，而是停留在与AppListProduitImmobilierComponent相对应的父视图上。但是，网址是

http://localhost:4200/listproduitimmobilier/details/1

这是子视图网址。你能帮我吗？

初学者问题：无法使用适当的组件在子路线中导航

0 个答案: