下面是一个示例代码,用于统计Angular中某个类的实例数量,并在页面上显示出来:
CounterService
服务,用于统计实例数量:import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CounterService {
private count: number = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
getCount() {
return this.count;
}
}
CounterService
服务并使用它:import { Component } from '@angular/core';
import { CounterService } from './counter.service';
@Component({
selector: 'app-component',
template: `
Component Instance Count: {{ count }}
`,
})
export class MyComponent {
count: number = 0;
constructor(private counterService: CounterService) {}
ngOnInit() {
this.count = this.counterService.getCount();
}
increment() {
this.counterService.increment();
this.count = this.counterService.getCount();
}
decrement() {
this.counterService.decrement();
this.count = this.counterService.getCount();
}
}
CounterService
服务:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CounterService } from './counter.service';
import { MyComponent } from './my.component';
@NgModule({
declarations: [AppComponent, MyComponent],
imports: [BrowserModule],
providers: [CounterService],
bootstrap: [AppComponent]
})
export class AppModule {}
AppComponent
中使用MyComponent
组件:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Angular Component Instance Count
`,
})
export class AppComponent {}
AppComponent
:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CounterService } from './counter.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [CounterService],
bootstrap: [AppComponent]
})
export class AppModule {}
通过以上步骤,就可以在页面上显示组件实例的数量,并且可以通过按钮的点击事件来增加或减少实例数量。