0
votes

En angulaire, je suis en route vers une route de composant différente du même module, l'URL change mais la vue ne change pas

Je suis nouveau dans angular, dans angular 6, j'essaie de router un composant d'un autre composant, les deux composants appartiennent au même module. Le code suivant modifie l'URL mais la vue ne change pas. Voici mon html du premier composant componentA.html:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DetailedInfoComponent } from './touchpoint/detailed-info/detailed-info.component';


const routes: Routes = [
  { path: '', redirectTo: '/touchpoint/list', pathMatch: 'full' },
  {path: 'details/:id',component: DetailedInfoComponent }
];

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

tp-component-routing.ts:

export class tpRoutingModule { }

]; p >

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]

})

import { tpListComponent } from './tp-list/tp-list.component';
import { tpComponent } from './tp/tp.component';
import { DetailedInfoComponent } from './detailed-info/detailed-info.component';

const routes: Routes = [
{
    path: 'tp',
    component: tpComponent,
    children: [
        {
            path: 'list',
            component: tpListComponent
        },
        {
            path: 'details/:id',
            component: DetailedInfoComponent
        }
    ]
}

app-routing.module.ts

<div class="tp-content" routerLink="./details/{{tp.name}}"></div>

L'URL change en tant que tp / details / id avec cette vue Je veux de DétailléInfoComponent.

angular angular6 angular-routing routes url

1 commentaires

où est votre ?

3 Réponses :

0
votes

Vous devez également ajouter un . Veuillez les ajouter à l'endroit où vous souhaitez charger les deux composants enfants. c'est-à-dire dans votre cas tpComponent.html :

<router-outlet></router-outlet>

1 commentaires

est dans app.component.html, si je le garde également dans tpComponent.html. Le premier composant est rendu deux fois et sur clic, le deuxième composant est rendu après le premier composant mais je le voulais seul uniquement lors de la redirection.

0
votes

Oui, Joel a raison. Où est votre La vue routée est rendue à l'intérieur de ces balises.

2 commentaires

app.component.html n'a que

0
votes

Essayez ceci. app.component.ts

const routes: Routes = [
  {
    path: '/tslist',
    component: TpListComponent,
    pathMatch: 'full'
  },
  {
    path: '/detailInfo/:Id',
    component: DetailInfoComponent,
    pathMatch: 'full'
  },

tp.module.ts

@NgModule({
      imports: [
       tpModule
        ]
    })
    export class AppModule { }

app-module.ts
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { tplist } from '../tp-list; import { detailinfo } from '../detailinfo; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ TplistComponent, DetailInfoComponent ], imports: [ CommonModule, FormsModule, ReactiveFormsModule ] }) export class TpModule { }

<router-outlet></router-outlet>

5 commentaires

tpComponent est un module, à l'intérieur de plusieurs composants sont là, donc par défaut, il charge tpList, en cliquant sur l'élément tpList, je veux rediriger vers le composant tpDetails.

Je suis désolé mais votre question ne fournit pas beaucoup de détails sur ce que vous voulez exactement réaliser. Veuillez lire cet article pour réaliser le routage au niveau du module medium.com/@astamataris/...

vous ne devez pas ajouter de route à la fois dans le routage des applications et dans le routage des modules. Veuillez partager la définition de votre module tp. Le partage de blog ci-dessus vous aidera certainement

J'ai un app-component.html qui a uniquement la balise router-outlet, puis j'ai tp-module à l'intérieur duquel j'ai 2 composants tp-component & tp-details component, maintenant je veux rediriger de tp-component vers tp- Détails du composant sur clic de l'élément tp-component. les fichiers pertinents avec le code que j'ai déjà publiés.

changé ma réponse, selon vos commentaires.Si ce n'est toujours pas clair, veuillez partager pour les composants.