当我点击按钮时，我的内容显示在Angular 2应用程序的同一页面上

应用程序是我的主要组件或根组件。在应用程序文件夹中，我还有3个组件，分别是学校、教师和学生。现在在主页上我有3个按钮：一个用于学校，一个用于教师，一个用于学生。当我点击任何一个按钮时，我想在新页面上显示的新内容将显示在按钮下方的同一页面上

<div>
  <a routerLink="/school" routerLinkActive="active"><button class="mui-btn mui-btn--large mui-btn--raised" id="b1">SCHOOL REGISTRATION</button></a><br>
<br>
  <a routerLink="/teacher" routerLinkActive="active"><button class="mui-btn mui-btn--large mui-btn--raised" id="b2">TEACHER REGISTRATION</button></a><br><br><br>
  <a routerLink="/student" routerLinkActive="active"><button class="mui-btn mui-btn--large mui-btn--raised" id="b3">STUDENT REGISTRATION</button></a><br><br><br>
</div>
<router-outlet></router-outlet>

当我保留路由器出口标签时，内容显示在同一页上。但如果我删除它们，则不会显示任何内容，即使单击“学校”按钮时URL显示/school

我想点击按钮并在新页面上显示新内容

或者，是否有任何方法可以在单击按钮时隐藏旧内容并仅显示新内容

---

任何形式的帮助都将不胜感激。谢谢。

创建另一个名为MenuComponent的组件，将按钮添加到该组件，并将其设置为默认路由

然后，它将是应用程序加载时显示的第一个页面，当用户单击按钮时，它将被其他组件替换

---

如果需要的话，只需导航回根目录，就可以再次显示菜单

您可以将导航放在另一个组件中，并将该组件和其他组件添加为主组件的子组件，只需将父组件和导航组件的路径设置为：

---

请给我们你的app.component的内容。html@RadouaneROUFID我已经将我的app.component.html代码放入了问题中。这就是我的全部app.component.htmlid你在其他组件中重复了吗？@radouanerofid不，我没有。你是在问如何只在主页/主页上显示按钮，而不在学校/教师/学生页面上显示按钮？谢谢！您的Plunker示例非常有用！

const appRoutes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: '',
        component: MenuComponent
      },
      {
        path: 'school',
        component: SchoolComponent
      },
      {
        path: 'teacher',
        component: TeacherComponent
      },
      {
        path: 'student',
        component: StudentComponent
      }
    ]
  }
];