Question

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

在图像中，当我点击注册按钮时，我得到了文本注册表，但是我想要按钮去，只有文本＆＃34;注册＆＃34;出现。

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

main.ts -

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RouterModule} from '@angular/router';
import { SignInComponent } from './SignIn/signin.component';
import { SignUpComponent } from './SignUp/signup.component';
import { routes } from './app.routes';
@NgModule({
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes)],
declarations: [ AppComponent, SignInComponent, SignUpComponent],
bootstrap: [ AppComponent ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

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

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

例如： app.routes.ts只包含路由器插座（没有按钮）

路线将是：

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

欢迎组件将包含按钮。

角度2路由到不同的页面

1 个答案: