Question

我是刚开始使用angular开发Web应用程序。我正在开发一个电子商务网页。我已经建立了一个购物车（在名为“产品组件”的组件中），其中包含诸如总成本和数量之类的产品详细信息。效果很好（增加和减少数量和总成本）。

现在，我开发了另一个页面用于结帐和付款（购物组件），我想在其中添加产品详细信息以进行确认。所以我想在购物组件中显示“产品组件”中的“总成本”，“数量”值。当“产品组件”中的值更改时，“购物组件”中的值应更改，并且它们应该相同。

我尝试使用父子方法。但是问题是当我在父组件中定义子组件时，整个html都在渲染，而不仅仅是必填字段。

我也尝试过使用组件之间的通用服务，但是它不能正常工作，或者我错过了一些东西。

  </div>
            <span class="input-group-btn">
              <button type="button" id="decrease" value="DecreaseValue" class="quantity-left-minus btn btn-success btn-number"  data-type="minus" data-field=""  (click)="decreaseValue()">
                <span class="glyphicon glyphicon-minus">-</span>
              </button>
          </span>
          <input type="text" id="number" name="quantity"  class="form-control input-number" value="{{value}}">
          <span class="input-group-btn">
              <button type="button" id="increase" value="Increase Value" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field=""  (click)="increaseValue()">
                  <span class="glyphicon glyphicon-plus">+</span>
              </button>
          </span> </li>
          <li class="list-group-item d-flex justify-content-between">
            <h6 class="my-0">Total cost in Euros  </h6>
            <p>{{price | currency : "€"  }}</p> 
          </li>


    constructor(private http: HttpClient,
        private route: ActivatedRoute,
        private ps: ProductShopService
        ) { this.value = this.ps.value,
          this.price = this.ps.price}


    constructor(private http: HttpClient,
        private route: ActivatedRoute,
        private ps: ProductShopService
        ) { this.value = this.ps.value,
          this.price = this.ps.price}

请指导我解决这个问题。

Answer 1

如果您想轻松地将值存储在前端，则可以使用服务。只要您在导航到一个新页面后尝试访问此数据，便可以使用。只需创建服务，然后为要访问的数据添加类变量即可。然后添加函数来设置和访问这些变量。为此，只需创建一个类，然后将@Injectable（）装饰器放在类定义上方。看起来像这样

@Injectable()
export class DataService {
  someDataToComunicate;
  
  SetDataToComunicate(data) {
    this.someDataToComunicate = data;
  }
  GetDataToComunicate() {
    return someDataToComunicate;
  }
}

然后在您的app.module.ts文件中的提供程序中包含该类。然后，在任何课程中，您都应该可以编写类似这样的内容

someProductData;

constructor(private dataService: DataService) {
}

someFunction() {
  this.someProductData = dataService.GetDataToComunicate();
}

然后，假定在导航至该页面之前已在某个组件中对其进行了设置，则应该可以在该组件中对其进行访问。

Answer 2

您需要看的是行为主题http://reactivex.io/rxjs/manual/overview.html#behaviorsubject

Answer 3

我不知道您是怎么做到的，但是您不应该在前端存储诸如价格和价值之类的价值。这应该存储在后端。因为如果您重新加载应用程序，则会重置值。

但是回到您的问题，您应该在服务内部使用行为主题，并在组件中进行订阅。这样您始终可以获得最新的价值

Answer 4

而不是为本地分配值。尝试使用模板中服务中的变量以及方法。我也建议您使用ngModel指令，而不是将值直接注入到输入中，也就是说，如果需要两种方式的数据传递。

  </div>
          <span class="input-group-btn">
            <button type="button" id="decrease" value="DecreaseValue" class="quantity-left-minus btn btn-success btn-number"  data-type="minus" data-field=""  (click)="ps.decreaseValue()">
              <span class="glyphicon glyphicon-minus">-</span>
            </button>
          </span>
          <input type="text" id="number" name="quantity"  class="form-control input-number" value="{{ps.value}}" [(ngModel)]="ps.value">
          <span class="input-group-btn">
              <button type="button" id="increase" value="Increase Value" class="quantity-right-plus btn btn-success btn-number" data-type="plus" data-field=""  (click)="ps.increaseValue()">
                  <span class="glyphicon glyphicon-plus">+</span>
              </button>
          </span> </li>
          <li class="list-group-item d-flex justify-content-between">
            <h6 class="my-0">Total cost in Euros  </h6>
            <p>{{ps.price | currency : "€"  }}</p> 
          </li>

仅将很少的值从一个角度分量传递到另一分量

4 个答案: