路由显示重复表单
Route displays a duplicate form
我在 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>
我在这里错过了什么?
在我看来,您似乎是使用其选择器 <app-auth></app-auth>
和 将 AuthComponent
直接包含在您的模板中,以便它出现在您的模板中<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...
您提到您的 app.component.html
中已经有 <app-auth>
,这就是 auth
组件的第一个实例,并且您的 [=] 中有 <router-outlet></router-outlet>
14=] 那是你的第二个实例。
我在 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>
我在这里错过了什么?
在我看来,您似乎是使用其选择器 <app-auth></app-auth>
和 将 AuthComponent
直接包含在您的模板中,以便它出现在您的模板中<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...
您提到您的 app.component.html
中已经有 <app-auth>
,这就是 auth
组件的第一个实例,并且您的 [=] 中有 <router-outlet></router-outlet>
14=] 那是你的第二个实例。