解决方法一：使用Angular Material组件库和NGRX存储

1. 首先，确保已经安装了Angular CLI和Angular Material，可以使用以下命令进行安装：

npm install -g @angular/cli
ng add @angular/material

2. 创建一个新的Angular项目，并在项目中启用NGRX存储：

ng new my-app
cd my-app
ng add @ngrx/store

3. 创建一个Angular组件，并在组件中使用Angular Material组件和NGRX存储：

app.component.ts：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from './counter.actions';

@Component({
  selector: 'app-root',
  template: `
    
      
        
Counter: {{ counter$ | async }}
        Increment
        Decrement
        Reset
      
    
  `,
})
export class AppComponent {
  counter$: Observable;

  constructor(private store: Store<{ counter: number }>) {
    this.counter$ = store.select('counter');
  }

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

counter.actions.ts：

import { createAction } from '@ngrx/store';

export const increment = createAction('Increment');
export const decrement = createAction('Decrement');
export const reset = createAction('Reset');

4. 在app.module.ts中导入所需的Angular Material模块和NGRX存储模块，并添加到imports数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { AppComponent } from './app.component';
import { counterReducer } from './counter.reducer';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: counterReducer }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

5. 运行应用程序：

ng serve

解决方法二：使用第三方Angular组件库和NGRX存储

1. 在Angular项目中安装所需的第三方组件库，例如ngx-bootstrap：

ng add ngx-bootstrap

2. 创建一个新的Angular组件，并在组件中使用第三方组件库和NGRX存储：

app.component.ts：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from './counter.actions';

@Component({
  selector: 'app-root',
  template: `
    

      
Counter: {{ counter$ | async }}
      Increment
      Decrement
      Reset
    
  `,
})
export class AppComponent {
  counter$: Observable;

  constructor(private store: Store<{ counter: number }>) {
    this.counter$ = store.select('counter');
  }

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }

  reset() {
    this.store.dispatch(reset());
  }
}

counter.actions.ts：

import { createAction } from '@ngrx/store';

export const increment = createAction('Increment');
export const decrement = createAction('Decrement');
export const reset = createAction('Reset');

3. 在app.module.ts中导入所需的第三方组件库模块和NGRX存储模块，并添加到imports数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { AppComponent } from './app.component';
import { counterReducer } from './counter.reducer';
import { ButtonsModule } from 'ngx-bootstrap/buttons';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule