Я новичок, когда дело доходит до Angular2/4, и я пытаюсь создать своего рода многошагового мастера построения. Сейчас он состоит из набора жестко закодированных прозрачных изображений друг над другом, которые отображаются в зависимости от числовых условий. Когда вы нажимаете кнопку, свойству присваивается числовое значение, которое вызывает использование *ngIf.
Каждый шаг является компонентом, также использующим *ngIf для отображения в зависимости от числового значения свойства.
Первый шаг — это выбор из 3-х разных типов велосипедов, после чего вы выбираете цвет.
Как я могу сохранить значение свойства из компонента велосипеда, чтобы изображение оставалось, когда я показываю шаблон из компонента цвета?
Во-первых, компонент с пошаговыми кнопками:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public step : number = 1;
increment(){
this.step += 1;
}
decrement(){
this.step -= 1;
}
}
... и HTML-разметка для этого компонента:
<div class="d-flex justify-content-center">
<bike *ngIf="step == 1"></bike>
<color *ngIf="step == 2"></color>
<!-- <drivetrain *ngIf="step == 3"></drivetrain> -->
<!-- <customize *ngIf="step == 4"></customize> -->
<!-- <accessories *ngIf="step == 5"></accessories> -->
<!-- <extras *ngIf="step == 6"></extras> -->
</div><br>
<button class="btn-success inline"(click)="decrement() ">PREV</button>
<button class="btn-success inline"(click)="increment() ">NEXT</button>
Далее следует шаг 2, в котором значение «велосипед» должно остаться с первого шага.
import { Component } from '@angular/core';
import { BikeComponent } from './bike.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@Component({
selector: 'color',
template: `
<div style="width:700px; margin:auto;">
<div *ngIf="bike == 0">
<img src="/assets/images/drivetrain1.png" style="position: fixed;">
</div>
<div *ngIf="color == 0">
<img src="/assets/images/frameblack.png" style="position: fixed;">
</div>
<div *ngIf="color == 1">
<img src="/assets/images/framered.png" style="position: fixed;">
</div>
<div *ngIf="color == 2">
<img src="/assets/images/frameblue.png" style="position: fixed;">
</div>
<div *ngIf="color == 3">
<img src="/assets/images/framelgreen.png" style="position: fixed;">
</div>
<div *ngIf="color == 4">
<img src="/assets/images/frameyellow.png" style="position: fixed;">
</div>
<div *ngIf="color == 5">
<img src="/assets/images/framewhite.png" style="position: fixed;">
</div>
<div *ngIf="color == 6">
<img src="/assets/images/frameorange.png" style="position: fixed;">
</div>
<div *ngIf="color == 7">
<img src="/assets/images/framedgreen.png" style="position: fixed;">
</div>
<div *ngIf="color == 8">
<img src="/assets/images/framegray.png" style="position: fixed;">
</div>
<br>
<div class="buttons-color" style="text-align:middle;">
<button class="btn btn-primary inline" (click)="onClick(0)">BLACK</button>
<button class="btn btn-danger inline" (click)="onClick(1)">RED</button>
<button class="btn btn-primary inline" (click)="onClick(2)">BLUE</button>
<button class="btn btn-success inline" (click)="onClick(3)">GREEN</button>
<button class="btn btn-primary inline" (click)="onClick(4)">YELLOW</button>
<button class="btn btn-primary inline" (click)="onClick(5)">WHITE</button>
<button class="btn btn-primary inline" (click)="onClick(6)">ORANGE</button>
<button class="btn btn-primary inline" (click)="onClick(7)">DARK G</button>
<button class="btn btn-primary inline" (click)="onClick(8)">GRAY</button>
</div>
</div><br>
`,
styleUrls: ['./app.component.css']
})
export class ColorComponent {
bike = 0;
color = 0;
onClick(colorValue) {
this.color = colorValue;
}
}
Я понимаю, что это вопрос для начинающих, но я много дней гуглил и читал учебники/stackoverflow. Я понятия не имею, как это сделать. Я также понимаю, что мой код — дерьмо, и мне бы хотелось сделать это совершенно другим способом, если вы его знаете.
