Angular获取浏览器名称和版本

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ɵgetDOM as getDOM } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <p>{{browserInfo}}</p>
  `
})
export class AppComponent {
  title = '浏览器信息';
  browserInfo: string;

  constructor(private titleService: Title) {
    this.browserInfo = this.getBrowserInfo();
  }

  getBrowserInfo(): string {
    const userAgent = getDOM().getUserAgent();
    const browser = this.getBrowser(userAgent);
    return `浏览器: ${browser.name} 版本: ${browser.version}`;
  }

  getBrowser(userAgent: string): {name: string, version: string} {
    const browsers = [
      { name: 'Chrome', version: 'Chrome' },
      { name: 'Firefox', version: 'Firefox' },
      { name: 'Safari', version: 'Version' },
      { name: 'Internet Explorer', version: 'MSIE' },
      { name: 'Microsoft Edge', version: 'Edge' },
      { name: 'Opera', version: 'OPR' }
    ];

    for (const browser of browsers) {
      if (userAgent.indexOf(browser.version) > -1) {
        const regex = new RegExp(`${browser.version}/(\\d+\\.\\d+)`);
        const matches = userAgent.match(regex);
        if (matches && matches.length > 1) {
          return { name: browser.name, version: matches[1] };
        } else {
          return { name: browser.name, version: 'Unknown' };
        }
      }
    }

    return { name: 'Unknown', version: 'Unknown' };
  }
}