각도 2/4 : 여러 구성 요소에서 속성 값을 공유하는 방법은 무엇입니까?

Question

저는 Angular2/4의 경우 총 초보자입니다. 그리고 저는 일종의 멀티 스텝 빌더 마법사를 만들려고합니다. 지금은 숫자의 조건에 따라 서로 위에 하드 코딩 된 투명 이미지로 구성되어 있습니다. 버튼을 클릭하면 * ngIf를 사용하도록 트리거하는 속성에 숫자 값이 지정됩니다.

각 단계는 Component이며 숫자 속성 값에 따라 * 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를 며칠 동안 읽었습니다. 나는 그것을하는 방법을 전혀 모른다. 나는 또한 내 코드가 허황하다는 것을 알고 있으며, 내가 아는 경우 완전히 다른 방법으로 사랑할 것입니다.

Answer 1

자, 그럼 제가 건축을 위해 요구되는 건축물의 종류를 설명해 드리겠습니다. 당신이

<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> --> 

을했던 것처럼 모든 단계를 개최합니다 모든 구성 요소 컨테이너의

첫 이제 당신이 원하는 것은 말은 사용자가 각 단계에서 선택한 항목의 구성을 저장하는 것입니다 수 있습니다. 자전거 유형, 색상 등등.

각 구성 요소는 자전거 구성 요소를 말하며 선택시 데이터를 방출합니다.

export class BikeComponent { 
@Output() onSelect = new EventEmitter(); 

select(type){ 
    this.onSelect.emit(type); 
} 
} 

이제 최상위 구성 요소에 자전거 유형을 받기 위해 다음과 같이 모든 단계를 렌더링합니다.

<bike *ngIf="step == 1" (onSelect)="bikeType = $event"></bike> 

이제 bikeType을 다른 단계로 전달하려는 경우 다음과 같은 구성 요소에 입력을 만들어야합니다.

export class ColorComponent { 
@Input() bikeType; 
} 

및 HTML 내부

단계에서

<color *ngIf="step == 2" [bikeType]="bikeType"></color> 

지금 당신이 공유 한 정보는 2 단계로 당신이 그러나 당신은 당신이 공유하고 싶은 그 어느 것과 싶어 할 수 있습니다.