angular 路由器在同一页面上加载 2 个组件视图。延迟加载路由器插座问题

Question

我有一个包含 3 个步骤的表单，用户需要一次查看一个步骤，如果它有效则转到下一步，依此类推。

所以尝试使用 router 和延迟加载组件

初始页面自动加载

http://localhost:8080/init/first

但是当我从第一个组件 HTML 页面单击下一步按钮时。

期望的行为：页面上只会加载第二个组件 HTML。

实际行为： 第二个组件 HTML 已加载，并且在 HTML 下面第一个组件 HTML 也可见。

现在，当我们单击第二个组件上的下一步按钮时，所有 3 个组件的 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 { }

初始化-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>

first.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",

Answer 1

解决了问题。

实际上，所有组件各自的 HTML 必须具有正确的表单结构。

我的一个页面具有反应式形式但语法无效。这就是它给出意外输出的原因

angular 路由器在同一页面上加载 2 个组件视图。延迟加载路由器插座问题

angular router load 2 component view on same page . lazy load router outlet issue

angular-routing

angular

angular-router