Question

我想使用Web应用程序的向导创建导航工具。

到目前为止，向导已经在每个页面上使用2个导航按钮（后退/下一个）。 PO还要求在页面顶部插入导航面板，以便用户可以轻松地在页面之间切换而无需在整个站点中导航。对于此面板，我使用RouterLink生成指向特定页面的链接。

我的实施仍有轻微问题。当我使用顶部导航面板在页面之间移动然后决定使用导航按钮时，我的导航向导功能不再被识别（全文是：this.onNext不是GeneralInfoComponent.next中的函数（generalinfo.component.ts:53）））。

这是我的代码：

Generalinfo.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { EvaluationService } from '../evaluation.service';
import { InfoGeneral } from './model';
import { WizardComponent } from './../wizard/index';

@Component({
moduleId: module.id,
selector: 'generalinfo-cmp',
templateUrl: 'generalinfo.component.html'
})

export class GeneralInfoComponent {

@Input() onNext: any;

generalInfo:    InfoGeneral;
form:               FormGroup;
wizard:             ClaimStep;

constructor(
    private fb: FormBuilder,
    private evaluationService: EvaluationService
) {
        this.initForm();
        this.generalInfo = evaluationService.getGeneralInfo();
}


initForm() {
    this.form = this.fb.group({
        generalInfo: this.fb.group({
            consultantFirstName: ['', Validators.required],
            consultantLastName: ['', Validators.required],
            consultantPhone: ['', Validators.required],
            consultantEmail: ['', Validators.required],
            consultantWishedJob: ['', Validators.required],
            managerName: ['', Validators.required],
            consultantExperience: ['', Validators.required],
            consultantMinRemuneration: ['', Validators.required],
            consultantMaxRemuneration: ['', Validators.required],
            consultantAvailableDate: ['', Validators.required],
            consultantInterviewDate: ['', Validators.required],
            consultantInterviewHour: ['', Validators.required],
            consultantComment: ['', Validators.required]
        })
    });
}

next() {
        this.onNext();
}
}

RandomPage.component.html （显示导航面板链接）

[...]
<a [routerLink]="['/dashboard/evaluation/generalinfo/']" skipLocationChange><span class="label">✓</span></a>
[...]

wizard.component.html

<generalinfo-cmp *ngIf="wizard.currentStep === 1" [onNext]="onNext"></generalinfo-cmp>
<matrice-cmp *ngIf="wizard.currentStep === 2" [onBack]="onBack" [onNext]="onNext"></matrice-cmp>
<entretienrh-cmp *ngIf="wizard.currentStep === 3" [onBack]="onBack" [onNext]="onNext" ></entretienrh-cmp>
<entretienmgr-cmp *ngIf="wizard.currentStep === 4" [onBack]="onBack" [onNext]="onNext" ></entretienmgr-cmp>
<entretiendir-cmp *ngIf="wizard.currentStep === 5" [onBack]="onBack" [onNext]="onNext" ></entretiendir-cmp>
<proposition-cmp *ngIf="wizard.currentStep === 6" [onBack]="onBack"></proposition-cmp>

wizard.component.ts

import { Component, Inject  } from '@angular/core';
import {  ClaimStep } from './wizard.service';

@Component({
  moduleId: module.id,
  selector: 'wizard-cmp',
  templateUrl: 'wizard.component.html',
  providers: [ClaimStep],
})

export class WizardComponent  {

wizard: ClaimStep;
constructor(private claimStep: ClaimStep) {
    this.wizard = claimStep;
}

onNext = () => {
    this.wizard.addStep();
}

onBack = () => {
    this.wizard.subtractStep();
}

onSwitch = () => {
            console.log(this.wizard.getCurrentStep());
    }
}

wizard.service.ts

import {Injectable} from '@angular/core';


@Injectable()
export class ClaimStep {
currentStep: number;

constructor() {
    this.currentStep = 1;
}

addStep(): number {
    return this.currentStep++;
}

subtractStep() {
    this.currentStep = this.currentStep - 1;
    return this.currentStep;
}

getCurrentStep() {
    return this.currentStep;
}
}

感谢您对此

的任何意见

Answer 1

我认为您可能遇到this上下文的问题。

你能尝试使用它吗？

onNext = (() => {
    this.wizard.addStep();
}).bind(this);

onBack = (() => {
    this.wizard.subtractStep();
}).bind(this);

或者这可能（而不是之前的建议）：

... [onNext]="onNext.bind(this)" ...

角度导航向导

1 个答案: