Dev Faq
0
votes

J'utilise l'angulaire 7 lorsque RouterLink ne fonctionne pas lorsque je clique sur le bouton d'ancrage, il ne fonctionne pas

en angulaire 7 J'ai défini un dossier d'application de composant différent et définir un composant dans la route est bien lorsque je défiere le nom du routeur dans l'URL, ce qui fonctionne bien me montrer que le composant qui est attaché à cette URL mais que je définis ce nom de récit Tag d'ancrage Cliquez sur l'ancrage IT, s ne fonctionne pas ici est mon code HTML 

const routes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  },
];

2 commentaires

Pouvez-vous nous montrer votre structure de routage

Importer {ngmodule} de '@ angular / noyau'; Importer {itinéraires, routeursmodule} de '@ angular / routeur'; importer {homecomponent} de './home/home.component'; importer {AbuteComponent} de './about/about.commonent'; Constting itinéraires: itinéraires = [{chemin: '', Redirecto: 'Accueil', Pathmatch: 'Plein'}, {Path: 'Home', Composant: Homecomponent}, {Path: 'À propos de', Composant: AboutComponent},] ; @NGMODULE ({importateurs: [ROUTERMODULE.FORROOT (itinéraires)], Exportations: [RouterModule]}) Exporter la classe Apprétingmodule {}

3 Réponses :

0
votes

Essayez comme ceci:

Définir ROUTERMODULE FORT> Comme ceci: P> 

<li class="nav-item">
    <a class="nav-link" routerLink="/home">Home</a>
  </li>
  <li class="nav-item @@about">
    <a class="nav-link" routerLink="/about">About</a>
  </li>
  <li class="nav-item @@blog">
    <a class="nav-link" routerLink="/blog">BLOG</a>
  </li>  
<router-outlet></router-outlet>

8 commentaires

mon problème est dans la liste des menus lorsque je clique sur l'ancre, S n'est pas effectué l'URL.

Const Routes: Routes = [{Chemin: '', Redirecto: 'Accueil', Pathmatch: 'Full'}, {Path: 'Home', Composant: Homecomponent}, {Path: 'À propos', Composant: AboutComponent}, { chemin: "blog", composant: blogcomponent},];

Avez-vous ajouté ?

Vous devez ajouter et menu dans app.component.html. Vous pouvez créer un composant de menu et l'ajouter dans APP.COMPONENT

J'ai défini le fichier CSS et JS dans Index.html It, s fonctionnent bien, mais quand je commence à cliquer sur l'ancre, ce qui ne fonctionne pas

et j'ai des images dans les actifs, s ne fonctionne pas non plus lorsque je commence à cliquer sur l'ancrage.

Premier concentré sur un seul problème. Vous pouvez partager votre code dans Stackbiltz

Il suffit de créer un nouveau stackbiltz avec un seul routage. Vous n'avez pas à ajouter tout, et vous pouvez me contacter dans linkedin.com/in/adritritasharma

1
votes

Si votre étiquette d'ancrage ne devient pas bleue, cela signifie que RouterLink n'est pas contraigné par une balise d'ancrage. C'est parce que vous n'avez pas importé RouterModule .

Remarque: vous devez importer RouterModule dans le module où vous avez déclaré ce composant où vous ajoutez routeursLink et non dans le app.module.ts . Par exemple: si vous avez home.component.ts dans home.module.ts et que vous souhaitez utiliser dans home.component.html ajoutez roupmodule dans home.module.ts xxx

0 commentaires
0
votes

Peut-être que vous avez besoin d'ajouter cela à votre application d'application.Module: xxx

et dans vos importations: xxx

faites défiler Pour top sur la route Changement d'une manière simple, placez sur app.componenet.ts: xxx

app.commonent.html: xxx

styles.css xxx

2 commentaires

C'est un excellent travail pour faire défiler la composante en haut lors du routage, s

pouvez-vous définir que comment puis-je faire défiler le haut en haut pendant le routage

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail