Angular 中根据路由动态添加元描述

### 在Angular中根据路由动态添加元描述

typescript
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Title, Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private titleService: Title,
    private metaService: Meta
  ) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.updateMetaTags();
      }
    });
  }
  updateMetaTags() {
    const currentRoute = this.router.routerState.snapshot.root;
    let title = 'Default Title';
    let description = 'Default Description';
    // 根据当前路由设置标题和描述
    if (currentRoute.firstChild?.data['title']) {
      title = currentRoute.firstChild.data['title'];
    }
    if (currentRoute.firstChild?.data['description']) {
      description = currentRoute.firstChild.data['description'];
    }
    this.titleService.setTitle(title);
    this.metaService.updateTag({ name: 'description', content: description });
  }
}

typescript
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      title: '首页 - 我的网站',
      description: '欢迎来到我的网站，这是首页的描述信息。'
    }
  },
  // 其他路由配置...
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }