Маршрут отображает дублируемую форму

Question

Я начал проект в угловом2, но по какой-то причине мой маршрут отображает мой компонент два раза. Вот связанный фрагмент кода.

app.routing.ts

// Some import 
import { AuthComponent } from './master/auth'; 

const appRoutes: Routes = [ 
    { 
    path: 'master/registration', 
    component: AuthComponent 
    } 
]; 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

app.module.ts

import { AuthComponent } from './master/auth/auth.component'; 

import { AppComponent } from './app.component'; 
import { routing } from './app.routing'; 

@NgModule({ 
    declarations: [ 
    // components 
    AuthComponent 
], 
providers: [ 
// some providers 
], 
imports: [ 
    BrowserModule, 
    ReactiveFormsModule, 
    routing 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

app.component.html содержит <app-auth></app-auth>

auth.component. ts

import { Component, OnInit } from '@angular/core'; 
import * as all from './auth-utils'; 
@Component({ 
    moduleId: module.id, 
    selector: 'app-auth', 
    templateUrl: 'auth.component.html', 
    styleUrls: ['auth.component.css'] 
}) 
export class AuthComponent implements OnInit { 

    constructor() {} 

    ngOnInit() { 
    } 

} 

auth.component.html

<app-register-form [fields]="fields"></app-register-form> 
<app-login-form [loginFields]="loginFields"></app-login-form> 
<router-outlet></router-outlet> 

Что я здесь отсутствует?

Answer 1

Он смотрит на меня, как вы включаете свой AuthComponent непосредственно в шаблоне, используя его селектор <app-auth></app-auth>и маршрутизации к нему, чтобы он отображался в вашем <router-outlet>. Вы просто хотите сделать то или другое.

Поскольку вы пытаетесь перейти на AuthComponent, удалите <app-auth></app-auth> из вашего шаблона. В самом деле, поскольку AuthComponent является целевой маршрутизацией, он не нужен селектор на всех, так что вы можете удалить некоторую путаницу путем удаления строки из его компонентов аннотации:

@Component({ 
    moduleId: module.id, 
    /* selector: 'app-auth', */ 
    templateUrl: 'auth.component.html', 
    styleUrls: ['auth.component.css'] 
}) 
export class AuthComponent... 

Answer 2

Вы упомянули, что у вас уже есть <app-auth> в ваш app.component.html, который дает вам первый экземпляр компонента auth, и у вас есть <router-outlet></router-outlet> внутри вашего auth.component.html, который является вашим вторым экземпляром.