Question

我正在开展一个项目，我需要一个带计数器的购物车图标。我正在使用AngularJS 2，并被困在某个地方。我需要一个购物车的图标，标题中有一个计数器。当有人从购物车中删除某个商品时，我希望标题中的数字减少。由于标题和购物车是两个不同的组件，并且两者都有不同的控制器，我不明白如何通知标题已从购物车中删除了一个项目。

亲切的问候

更新我自己找到了解决方案，通过使用共享服务，这可以实现。您只需要在名为＆＃39; quantity＆＃39;的服务中声明一个变量，将服务注入标题组件的构造函数和您使用的标题的模板中[yourService.quantity＆＃39;

Answer 1

您需要使用EventEmitter API和@Output装饰器。

假设我们有一个父Component，并在我们将它绑定到名为CounterComponent’s的组件时要调用的类上设置一个名为myValueChange的函数：

// app.component.ts
import {Component} from 'angular2/core';
import {CounterComponent} from './counter.component';

@Component({
  selector: 'my-app',
  styles: [`
    .app {
      display: block;
      text-align: center;
      padding: 25px;
      background: #f5f5f5;
    }
  `],
  template: `
    <div class="app">
      <counter [counterValue]="myValue"></counter>
    </div>
  `,
  directives: [CounterComponent]
})
export class AppComponent {
  public myValue:number = 2;
  myValueChange(event) {
    console.log(event);
  }
}

在类AppComponent上，我们声明myValueChange接受事件作为参数。接下来，我们需要在<counter>组件上创建自定义属性名称以将此函数挂钩，我们称之为counterChange：

// app.component.ts
import {Component} from 'angular2/core';
import {CounterComponent} from './counter.component';

@Component({
  selector: 'my-app',
  styles: [`
    .app {
      display: block;
      text-align: center;
      padding: 25px;
      background: #f5f5f5;
    }
  `],
  template: `
    <div class="app">
      <counter [counterValue]="myValue" (counterChange)="myValueChange($event);"></counter>
    </div>
  `,
  directives: [CounterComponent]
})
export class AppComponent {
  public myValue:number = 2;
  myValueChange(event) {
    console.log(event);
  }
}

请注意我们如何使用(counterChange)括号括起来，这告诉Angular这是一个事件绑定，类似于(click)。现在我们需要在CounterComponent。

中镜像此API

 // counter.component.ts
 import {Component, Input, Output, EventEmitter} from 'angular2/core';

 @Component({
   selector: 'counter',
   styles: [`
     // omitted
   `],
   template: `
     // omitted
   `
 })
 export class CounterComponent {
   @Input() counterValue = 0;
   @Output() counterChange = new EventEmitter();
   increment() {
     this.counterValue++;
     this.counterChange.emit({
       value: this.counterValue
     })
   }
   decrement() {
     this.counterValue--;
     this.counterChange.emit({
       value: this.counterValue
     })
   }
 }

请注意@Output counterChange如何设置为EventEmitter的新实例，此@Output装饰器使counterChange属性可用作事件绑定，就像我们在上面看到的那样模板(counterChange)。

几乎在那里，我们想告诉父组件当counterChange实际更新值时发生了Component事件，正如我们所知道的那样，在点击事件中发生了这种情况。让我们在那里发出一个事件，因为它似乎是一个合乎逻辑的地方：

// counter.component.ts
...
export class CounterComponent {
  @Input() counterValue = 0;
  @Output() counterChange = new EventEmitter();
  increment() {
    this.counterValue++;
    this.counterChange.emit({
      value: this.counterValue
    })
  }
  decrement() {
    this.counterValue--;
    this.counterChange.emit({
      value: this.counterValue
    })
  }
}

请注意，我们发出的Object具有值属性，您不必执行此操作，但在父级回调中使用该事件时它看起来更好（event.value更明确）。

我们的父组件现在可以获取$event对象，因为我们已使用(counterChange)="myValueChange($event);"将其传递到模板中。

// app.component.ts
...
export class AppComponent {
  public myValue:number = 2;
  myValueChange(event) {
    // result: { value: <number> }
    console.log(event);
  }
}

就是这样。

购物车柜台在AngularJS 2

1 个答案: