docs: fix `SpyDirective` in `lifecycle-hooks` docs example to use one ID per instance (#40208)

Previously, the `SpyDirective` in the `lifecycle-hooks` docs example
would use a different ID when logging `onInit` and when logging
`onDestroy` for the same instance, making it impossible to associate the
two calls. This was not helpful and came in constrast with how the
directive was described in the corresponding guide and shown in the
accompanying `spy-directive.gif` image.

This commit fixes the logic of the `SpyDirective` class to use the same
ID for all log operations of an instance.

Partially addresses #40193.

PR Close #40208

aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts

@@ -10,15 +10,16 @@ let nextId = 1;
 // Usage: <div appSpy>...</div>
 @Directive({selector: '[appSpy]'})
 export class SpyDirective implements OnInit, OnDestroy {
+  private id = nextId++;
 
   constructor(private logger: LoggerService) { }
 
   ngOnInit() {
-    this.logger.log(`Spy #${nextId++} onInit`);
+    this.logger.log(`Spy #${this.id} onInit`);
   }
 
   ngOnDestroy() {
-    this.logger.log(`Spy #${nextId++} onDestroy`);
+    this.logger.log(`Spy #${this.id} onDestroy`);
   }
 }
 // #enddocregion spy-directive