J'ai généré trois composants différents dans le projet angular 7
ng g c mycomp1 ng g c mycomp2 ng g c mycomp3
maintenant je veux développer un onglet dans le composant mycop1 qui ressemble à ci-dessous
en cliquant sur Premier onglet, il devrait afficher le HTML ou rendre le contenu du même composant.
en cliquant sur le deuxième onglet dont j'avais besoin pour rendre le contenu du composant mycomp2 (à partir du composant différent),
De même à partir du troisième onglet requis pour le rendu à partir du composant mycomp3.
merci de bien vouloir comment puis-je procéder pour ce faire,
Merci
4 Réponses :
Vous pouvez avoir un conteneur contenant les 3 composants et ajouter ngIf à chaque composant qui décidera de l'afficher ou non.
Et bien sûr, vous pouvez toujours utiliser les onglets de matériaux angulaires: https://material.angular.io/components/tabs/overview
Non. Utilisez le routage et la sortie du routeur. C'est juste une mauvaise pratique.
@ritaj - Qu'est-ce qu'une mauvaise pratique?
Ce que tu as écris. N'utilisez pas 3 ngIf s si vous pouvez utiliser router-outlet qui est construit littéralement pour cette situation.
Et si je ne veux pas que mes onglets soient modifiés ou contrôlés par itinéraire?
Pourquoi ne voudriez-vous pas cela?
Qui a dit que chaque fois que je cliquais sur un onglet, je devais changer d'itinéraire?
Ensuite, utilisez au moins un ngSwitch , de toute façon ngIf est une solution terrible.
LOL !! J'ai conseillé ngIf juste pour dessiner une idée générale. Si vous avez plus de quelques onglets. oui, bien sûr - utilisez ngSwitch. cela ne fera vraiment pas la grande différence
Je suis d'accord avec cette approche. Vous n'aurez pas besoin d'avoir une prise de routeur dans une prise de routeur. en faisant simplement l'instruction if, vous pouvez vous déplacer rapidement.
Je n'utilise pas de matériau angulaire mais vous devrez utiliser le routeur pour accéder à chacun d'eux.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './home/home.module#HomeModule' },
{ path: 'mycomp1', component: MyComp1Component },
{ path: 'mycomp2', component: MyComp2Component },
{ path: 'mycomp3', component: MyComp3Component }
];
Supposons que nous ayons 4 composants (app.component, a.component, b.component, c.component)
vérifiez le code complet dans l'url ci-dessous https://stackblitz.com/edit/angular-gerrxm
je ne veux pas utiliser comme
Vérifiez maintenant ce lien stackblitz.com/edit/angular-gerrxm , j'ai mis à jour le code en en utilisant la prise du routeur, cela peut vous aider à résoudre votre problème.
Si vous pensez que c'est la bonne réponse, marquez-la pour que d'autres puissent l'utiliser.
J'implémente la logique sur l'un des composants nouvellement créés, par exemple mycomp1 pas dans appcomponent.html, que faire si je dois afficher le contenu du même HTML après avoir cliqué sur Tab1.
Le problème avec cette approche est que vous devrez garder ces onglets au niveau supérieur d'une application à tout moment. si vous vouliez que les onglets se trouvent à l'intérieur d'une page que vous avez déjà dans la prise du routeur, vous auriez besoin d'une prise de routeur dans une prise de routeur.
Fichier Html:
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: block;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
Fichier Ts:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(
private router: Router
) {}
setTab(tabname: string) {
this.router.navigate([`/${tabname}`]);
}
}
CSS:
<div class="tab">
<button class="tablinks" routerLink="/tab1">Tab 1</button>
<button class="tablinks" routerLink="/tab2">Tab 2</button>
<button class="tablinks" routerLink="/tab3">Tab 3</button>
</div>
Using router method in component
<div class="tab">
<button class="tablinks" (click)="setTab('tab1')">Tab 1</button>
<button class="tablinks" (click)="setTab('tab2')">Tab 2</button>
<button class="tablinks" (click)="setTab('tab3')">Tab 3</button>
</div>
<router-outlet></router-outlet>
Les onglets doivent être des liens de routeur et ci-dessous doit être une sortie de routeur. Vous pouvez apprendre tout cela si vous terminez le didacticiel Angular. angular.io/tutorial
Vous pouvez consulter les articles suivants - blog.oughttram.io/angular/2015/04/09/… juristr.com/blog/2016/02/learning-ng2-creating-tab-component J'ai récemment implémenté des onglets dans mon application en suivant ces articles.
HI @ user2216584, vue sage, votre exemple semble correct mais je veux rendre le contenu d'un autre composant en utilisant le routage. pouvez-vous aider à ce sujet