3

我在 angular2 中启动了一个项目，但无论出于何种原因，我的路线都会显示我的组件两次。这是相关的代码片段。

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>

我在这里想念什么？

4

2 回答 2

5

在我看来，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...
于 2016-08-29T13:41:17.470 回答
3

你提到你已经<app-auth>在你的app.component.html, 那给了你组件的第一个实例auth，而你在你的<router-outlet></router-outlet>里面auth.component.html是你的第二个实例。

于 2016-08-29T13:44:11.357 回答