如何用TypeScript控制Angular cd-timer组件的显示与属性配置

核心结论 #

代码主要写在导航栏组件中，配合路由监听或共享服务，就能实现不同页面的计时器差异化配置与显示控制；若页面需动态生成配置（比如从接口获取参数），则需要在目标页面组件中配合共享服务传递配置信息。

方案一：路由静态配置（适合固定参数的场景） #

直接在导航栏组件中监听路由变化，根据当前页面路由切换计时器的显示状态与参数。

1. 导航栏组件 TypeScript 代码

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  // 控制计时器显示
  showTimer = false;
  // 计时器基础配置
  timerConfig = {
    countdown: true,
    startTime: 300,
    endTime: 0,
    format: 'ms'
  };

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听路由跳转完成事件，更新计时器状态
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.syncTimerWithPage(event.urlAfterRedirects);
      }
    });
  }

  // 根据当前路由匹配对应配置
  private syncTimerWithPage(currentUrl: string): void {
    // 定义需要显示计时器的页面路由及自定义参数
    const pageConfigs = {
      '/order': { startTime: 300, format: 'ms' },
      '/checkout': { startTime: 600, format: 'mm:ss' },
      '/quiz': { startTime: 180, format: 's' },
      '/live': { startTime: 900, format: 'mm:ss' }
    };

    if (pageConfigs[currentUrl]) {
      this.showTimer = true;
      // 合并默认配置与当前页面自定义配置
      this.timerConfig = { ...this.timerConfig, ...pageConfigs[currentUrl] };
    } else {
      this.showTimer = false;
    }
  }

  // 计时器结束回调
  timerEnd(): void {
    // 这里写计时器到期后的逻辑，比如弹窗提示、页面跳转等
    alert('时间到！');
  }
}

2. 导航栏 HTML 模板修改

用*ngIf控制显示，同时把属性绑定到组件内的配置变量：

<cd-timer 
  *ngIf="showTimer"
  [countdown]="timerConfig.countdown" 
  [startTime]="timerConfig.startTime" 
  [endTime]="timerConfig.endTime" 
  [format]="timerConfig.format" 
  (onComplete)="timerEnd()" 
  class="timerStyle">
</cd-timer>

方案二：共享服务动态配置（适合参数需动态生成的场景） #

如果某些页面的计时器参数需要从接口获取，或者需要页面组件主动控制，可通过共享服务传递配置信息。

1. 创建共享服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TimerConfigService {
  // 用 BehaviorSubject 保存配置状态
  private timerConfig$ = new BehaviorSubject<{show: boolean, [key: string]: any}>({show: false});

  // 设置配置
  setTimerConfig(config: {show: boolean, [key: string]: any}): void {
    this.timerConfig$.next(config);
  }

  // 获取配置订阅
  getTimerConfig() {
    return this.timerConfig$.asObservable();
  }
}

2. 目标页面组件中设置配置

比如在需要显示计时器的页面组件中：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TimerConfigService } from '../services/timer-config.service';

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.css']
})
export class QuizComponent implements OnInit, OnDestroy {
  constructor(private timerConfigService: TimerConfigService) {}

  ngOnInit(): void {
    // 假设从接口获取到考试时长为120秒
    const examDuration = 120;
    // 传递当前页面的计时器配置
    this.timerConfigService.setTimerConfig({
      show: true,
      countdown: true,
      startTime: examDuration,
      endTime: 0,
      format: 'mm:ss'
    });
  }

  ngOnDestroy(): void {
    // 页面销毁时清空配置，避免影响其他页面
    this.timerConfigService.setTimerConfig({show: false});
  }
}

3. 导航栏组件订阅配置

import { Component, OnInit } from '@angular/core';
import { TimerConfigService } from '../services/timer-config.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  showTimer = false;
  timerConfig = {
    countdown: true,
    startTime: 300,
    endTime: 0,
    format: 'ms'
  };

  constructor(private timerConfigService: TimerConfigService) {}

  ngOnInit(): void {
    // 订阅配置变化，实时更新计时器状态
    this.timerConfigService.getTimerConfig().subscribe(config => {
      this.showTimer = config.show;
      if (config.show) {
        this.timerConfig = { ...this.timerConfig, ...config };
      }
    });
  }

  timerEnd(): void {
    alert('时间到！');
  }
}

内容的提问来源于stack exchange，提问作者Daniel Fabre