У меня есть форма, которая имеет 3 шага, и пользователю нужно видеть один шаг за раз, и если он действителен, перейти к следующему шагу и так далее.
Итак, попробуйте с маршрутизатором и компонентом отложенной загрузки.
изначально страница загружается автоматически
http://localhost:8080/init/first
Но когда я нажимаю следующую кнопку на первой HTML-странице компонента.
Желаемое поведение: на странице будет загружен только второй компонент и его HTML.
Фактическое поведение: HTML-код второго компонента загружен, и под этим HTML-кодом HTML-код первого компонента также виден.
И теперь, когда мы нажимаем кнопку «Далее» во втором компоненте, HTML-код всех трех компонентов отображается на одной странице, что не является желаемым результатом.
Ниже приведен соответствующий код.
init.module.ts
import { InitRoutes } from './init.routing';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { ThirdComponent } from './third/third.component';
import { SummaryComponent } from './summary/summary.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(InitRoutes),
FormsModule,
ReactiveFormsModule,
],
declarations: [
FirstComponent,
SecondComponent,
ThirdComponent,
SummaryComponent,
],
})
export class InitModule { }
init.routing.ts
import { Routes } from '@angular/router';
export const InitRoutes: Routes = [
{
path: '',
children: [
{
path: 'first',
component: FirstComponent,
data: { step: 1 }
},
{
path: 'second',
component: SecondComponent,
data: { step: 2 }
},
{
path: 'third',
component: ThirdComponent,
data: { step: 3 }
},
{
path: 'summary',
component: SummaryComponent,
},
{
path: '',
redirectTo: 'first',
pathMatch: 'full'
},
{
path: '**',
component: FirstComponent
}
]
}
];
app.routing.ts
export const AppRoutes: Routes = [
{
path: '',
component: InitLayoutComponent,
children: [
{
path: '',
redirectTo: 'init',
pathMatch: 'full'
}, {
path: 'init',
loadChildren: './init/init.module#InitModule'
}]
}, ...]
init-layout.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-layout',
templateUrl: './init-layout.component.html',
styleUrls: ['./init-layout.component.less']
})
export class InitLayoutComponent { }
init-layout.component.html
<div >
<figure>
<img class="logo" src="assets/images/logo.png" alt="logo">
<figcaption class="f-18 font__normal--semibold"> Initialization Wizard </figcaption>
</figure>
<div class="card">
<!-- Nested view -->
<router-outlet></router-outlet>
</div>
</div>
первый.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Router, Route, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
})
export class FirstComponent implements OnInit {
public firstForm: FormGroup;
step: number;
constructor(private fb: FormBuilder, private router: Router, private route: ActivatedRoute) {
this.buildForm();
}
ngOnInit() {
this.route.data.subscribe((data) => {
this.step = data.step;
});
}
next() {
console.log('click on next ', this.step, this.route.outlet);
//this.router.navigate(['/init/second']); this also dows not works
this.router.navigate(['second'], { relativeTo: this.route.parent, skipLocationChange: true });
}
private buildForm() {
this.firstForm = this.fb.group({
licenseKey: [null, <any>Validators.required]
});
}
}
в чем может быть дело? Я также пробовал с выходным параметром, но безуспешно
сведения о версии
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.3.4",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",