2017-06-24 10 views
0

角度2を使用して別のページに移動しようとしていますが、前のページのコンテンツも表示されます。私を助けてください。画像で Screenshot角度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 }]; 

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

答えて

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

歓迎成分がボタンを含むであろう。

+0

が働いた。ありがとうございました :) –

関連する問題