如何开发angular7中在两个不同组件之间切换的选项卡？

我在angular 7项目中生成了三个不同的组件

ng g c mycomp1
ng g c mycomp2
ng g c mycomp3

现在我想在

mycop1

组件中开发一个选项卡，如下所示

通过单击第一个选项卡，它应该显示HTML或呈现来自同一组件的内容
通过单击第二个选项卡，我需要呈现来自mycop2组件（来自不同组件）的内容，
类似地，从mycop3组件渲染所需的第三个选项卡。 请帮助我如何进行此操作，

---

谢谢

您可以拥有一个容纳所有3个组件的容器，并向每个组件添加

ngIf

，以决定是否显示它

当然，您始终可以使用“角度材质”选项卡：

---

我不使用角度材质，但您需要使用路由器来导航到每个角度

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 }
];

---

假设我们有4个组件（app.component、a.component、b.component、c.component）

检查下面url中的完整代码 Html文件：

<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>

CSS:

---

标签应该是路由器链接，而波纹管应该是路由器出口。如果完成“角度”教程，您可以学习所有这些。您可以阅读以下文章-我最近在我的应用程序中通过以下文章实现了选项卡。HI@user2216584，view-wise您的示例看起来不错，但我想通过使用路由呈现另一个组件的内容。你能帮忙吗。使用路由和路由器出口。这只是一个坏习惯。@ritaj-什么是坏习惯？你写的。如果你可以使用路由器出口，就不要使用3

ngIf

s，这是专门为这种情况设计的。如果我不希望我的标签被更改或被路由控制怎么办？哈哈！！我建议ngIf只是为了勾勒出一个大概的想法。如果您有多个选项卡。是的，当然可以-使用ngSwitch。这真的没有什么大区别我不想用like代替我想用routing来显示内容现在检查这个链接，我已经用router outlet更新了代码，这可能会帮助你解决问题。如果你觉得这是正确的答案，标记它，所以其他人可以使用它。我正在一个新创建的组件上实现逻辑，例如，mycop1不在appcomponent.html中，如果我需要在单击Tab1后显示来自同一html的内容，该怎么办。这种方法的问题是，您需要始终将这些选项卡保持在应用程序的顶层。如果您希望选项卡位于路由器出口中已有的页面内，则需要路由器出口中的路由器出口。

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}`]);
  }

}

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;
}