Angular 角度2路由到不同的页面

我一直在尝试使用angular 2导航到不同的页面。它可以导航，但也会显示上一页的内容。请帮帮我。

在图中，当我点击“注册”按钮时，我得到了文本注册表，但我希望按钮消失，只显示文本“注册表”

app.component.html-

<div class='col-md-4'>
<button type=button class="btn btn-lg btn-primary" (click)="onClick1();">Sign In</button>
<button type=button class="btn btn-lg btn-default" (click)="onClick2();">Sign Up</button>
</div>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
</div>

app.routes.ts-

import { Routes} from '@angular/router';
import { SignInComponent } from './SignIn/signin.component';
import { SignUpComponent } from './SignUp/signup.component';

export const routes: Routes = [
{ path: '', redirectTo: 'signUp', pathMatch: 'full' },
{ path: 'signIn', component: SignInComponent },
{ path: 'signUp', component: SignUpComponent }];

---

这些按钮位于应用程序外壳上，因此它们将始终显示

如果不希望它们出现在每条路线上，请将按钮移动到它们自己的路线上

例如： app.routes.ts将仅包含路由器出口（无按钮）

路线为：

export const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full' },
  { path: 'signIn', component: SignInComponent },
  { path: 'signUp', component: SignUpComponent },
  { path: 'welcome', component: WelcomeComponent }
];

欢迎组件将包含按钮

export const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full' },
  { path: 'signIn', component: SignInComponent },
  { path: 'signUp', component: SignUpComponent },
  { path: 'welcome', component: WelcomeComponent }
];