小弟初學(xué)ng，摸索官網(wǎng)的例子，想請(qǐng)教下為何這個(gè)指令中的變量不能累加

就是控制臺(tái)#號(hào)后面的數(shù)字(nextId)為啥不會(huì)累加，是因?yàn)橹噶蠲看握{(diào)用都重新賦值了么；那文檔的例子是如何實(shí)現(xiàn)的。

spy.directive.ts

///<reference path="../../node_modules/@angular/core/src/metadata/directives.d.ts"/>
import {Directive, NgModule, OnDestroy, OnInit} from '@angular/core';
import {LoggerService} from './logger.service';

@Directive({selector: '[appSpy]'})
export class SpyDirective implements OnInit, OnDestroy {
  private nextId: number;
  constructor(private logger: LoggerService) {
    this.nextId = 1;
  }
  ngOnInit() {
    this.logIt(`onInit`);
  }
  ngOnDestroy() {
    this.logIt(`onDestroy`);
  }
  private logIt(msg: string) {
    this.logger.log(`Spy #${this.nextId++} ${msg}`);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { SpyComponent } from './spy.component';

import { LoggerService } from './logger.service';

import { SpyDirective } from './spy.directive';


@NgModule({
  declarations: [
    AppComponent,
    SpyComponent,
    SpyDirective
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [
    LoggerService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

spy.component.ts

import {Component} from '@angular/core';
import {OnInit} from '@angular/core';
import {Hero} from './hero';

@Component({
  selector: 'app-spy',
  templateUrl: './spy.component.html'
})

export class SpyComponent implements OnInit {
  heroes: Hero[] = [];
  nextId: number;
  name: string;
  constructor() {
    this.nextId = 1;
  }
  ngOnInit() {}
  addHero() {
    const h = new Hero(this.nextId++, this.name);
    this.heroes.push(h);
  }
  removeHero() {
    this.heroes.splice(this.heroes.length - 1, 1);
  }
  resetHero() {
    this.heroes.splice(0, this.heroes.length);
  }
}

spy.component.html

<input type="text" [(ngModel)]="name" />
<button type="button" (click)="addHero()">add</button>
<button type="button" (click)="removeHero()">remove</button>
<button type="button" (click)="resetHero()">reset</button>
<div *ngFor="let hero of heroes" appSpy class="heroes">
  {{hero.id}}: {{hero.name}}
</div>