Angular2/4：如何跨多个组件共享属性值？

说到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步，其中“bike”值应该保持在第一步的后面

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

  }

从'@angular/core'导入{Component}；
从“/bike.component”导入{BikeComponent}；
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
@组成部分({
选择器：“颜色”，
模板：`


黑色
红色
蓝色
绿色
黄色的
白色
橙色
暗G
灰色


`,
样式URL:['./app.component.css']
})
导出类颜色组件{
自行车=0；
颜色=0；
onClick（colorValue）{
this.color=colorValue；
}
}

---

我意识到这是一个初学者的问题，但我已经在谷歌上搜索和阅读教程/stackoverflow好几天了。我不知道怎么做。我也意识到我的代码是垃圾，如果你知道的话，我会喜欢一种完全不同的方式来完成它。

好的，让我来解释一下你需要构建的体系结构

首先是一个组件容器，它将像您一样保存所有步骤

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

现在，为了在顶级组件上接收bike类型，呈现所有步骤的组件如下所示

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

和内部html

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

---

现在，您已经共享了从步骤到步骤2的信息，并且您可以按照自己的意愿和希望共享的内容来执行此操作。

粘贴链接时可能会出现重复，而无需进一步解释，这不能被视为一个答案。这是一个带有代码示例的教程。我给你一个示例代码。好的，告诉我你想在不同的组件之间共享什么数据？意外删除了我的评论，但我想共享“bike”属性的数值。稍后，我还想分享“color”属性，但我假设这将以完全相同的方式完成。现在我遇到一个错误TS2304找不到名称“BikeService”，即使我制作了一个bike.service.ts，并将其导入AppModule并将其作为提供者。这太奇怪了。如果您不需要服务，那么有一种更好的方法可以使用最佳实践。我将向您展示一个示例代码，希望您能够理解。

export class ColorComponent {
 @Input() bikeType;
}

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