Мой атрибут «подкомпонент» не инициализируется

Question

У меня есть компонент панели администратора с другим компонентом (wizard.component.ts), на который ссылается как.

Компонент мастера имеет шаг между 1 и 3, и я загружаю различные вкладки на основе этого атрибута шага с помощью ngIf. Компонент мастера показывает, и я вижу теги

, но ngIf не работает, потому что я предполагаю, что атрибут шага не инициализирован.

Я попытался добавить this.step = 1 в ngOnInit, конструктор, и в ngOnChanges, но кажется, что переменная не инициализируется, пока я не нажму вокруг и не вызову некоторые изменения.

admin.component. html

  <div class="main-content">


      <!-- HEADER -->
      <div class="header">
        <div class="header-body ml-4">

          <h6 class="header-pretitle">
            Logged in as admin
          </h6>

          <h1 class="header-title">
            Admin panel
          </h1>

        </div>
      </div>
      <app-wizard></app-wizard>
      <!-- CARDS -->


    </div> <!-- / .main-content -->

wizard.component. html

<div *ngIf="step == 1"></div>
<div *ngIf="step == 2"></div>
<div *ngIf="step == 3"></div>

wizard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-wizard',
  templateUrl: './wizard.component.html',
  styleUrls: ['../../app.component.css','./wizard.component.css']
})
export class WizardComponent implements OnInit {
  step: number = 1
  constructor() { 
    this.step = 1
  }

  start() {
    this.step = 1
  }

  ngOnInit(): void {
    this.step = 1
    setInterval(() => {
      this.start()
    }, 1000);
  }

  ngOnChanges(){
    this.step = 1

  }

  continue(step) {
    this.step = step + 1
  }
  back(step) {
    this.step = step - 1
  }

}

Есть идеи? Спасибо

Answer 1

Не нужно беспокоиться о подключении к изменениям, представление должно просто обновляться в отношении установки нового значения шага. Я хотел бы предположить, что вы просто хотите что-то базовое c, такое как:

export class WizardComponent implements OnInit{
  public step: number;

  public ngOnInit(): void {
    this.step = 1;
  }

  public next(): void {
    this.step = this.step + 1;
  }

  public prev(): void {
    this.step = this.step - 1;
  }
}

Шаблон:

<div class="controls">
  <button [disabled]="step === 1" (click)="prev()">Back</button>
  <button (click)="next()">Next</button>
<div>

<div *ngIf="step === 1"> Tab 1 content </div>
<div *ngIf="step === 2"> Tab 2 content </div>
<div *ngIf="step === 3"> Tab 3 content </div>

Редактировать:

Создание основы c StackBlitz для это: https://stackblitz.com/edit/angular-nashof