Question

app是我的主要组件或根组件。在app文件夹中，我还有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>

当我保留router-outlet标签时，内容显示在同一页面上。但是，如果我删除它们，则不显示任何内容，即使URL显示/ school，如果我单击学校按钮。

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

或者，有什么方法可以隐藏旧内容并在点击按钮时显示新内容？

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

Answer 1

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

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

如果需要，还可以通过导航回根目录再次显示菜单。

Answer 2

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

Plnkr Example

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

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

2 个答案: