Angular UpdateTag 在检查元素中工作正常，但在页面视图源中未显示元标记更改

Question

我正在使用 Angular 13。我在 index.html 文件中设置了默认元标记。 我已经使用updateTag事件成功更新了元标记，但它在检查元素中工作正常，但不更新查看源页面。 我想使用 API 调用在元标记中设置动态信息。 当我通过检查检查时，它会显示更新的数据，但是当我在 Facebook 上共享链接时，它不会反映更新的数据。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, Meta } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module'; 

import {CoreModule } from './core/core.module';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule,
  ],
  providers: [Meta]
  bootstrap: [AppComponent]
})
export class AppModule { }

索引.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Title Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <link rel="canonical" href="https://example.com/" />
  <meta name="robots" content="index, follow" />
  <meta name="description"
    content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
  <meta name="keywords" content="test example, lorem ipsum">
  <meta property="og:url" content="https://example.com/" />
  <meta property="og:site_name" content="ExampleSite" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Lorem Ipsum is simply dummy text." />
  <meta property="og:description"
    content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
  <meta property="og:image" content="https://example.com/assets/logo/socialshare.png" />

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
</head>

<body>
  <app-root>
  </app-root>
</body>

</html>

服务.ts

import { Injectable,Inject  } from '@angular/core';
import { Title, Meta, MetaDefinition  } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class SeoService {

  constructor(
    private metaTagService: Meta,
    private title: Title,
    private router: Router,
  ) {
   }

  updateTitle(title: string){
    this.title.setTitle(title);
  }

  updateTags(metaTags: MetaDefinition[]){
    metaTags.forEach(m=> this.metaTagService.updateTag(m));
  }
  
  updateTag(obj :any){
    this.metaTagService.updateTag(obj)
  }
}

更新 test.ts 上的标签

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Service } from 'src/app/service.service';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
 
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private seo: Service
  ) {
   }

  ngOnInit(): void {
   this.updateTags()
  }

   updateTags(){
    this.seo.updateCanonicalUrl(environment.RouterBaseUrl + this.router.url)
    this.seo.updateTitle(test + ' - Profile')
    this.seo.updateTags([
      { name: 'description', content: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'},
      { property: 'og:url', content: environment.RouterBaseUrl + this.router.url},
      { property: 'og:title', content: test + ' - Profile'},
      { property: 'og:description', content: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'},
      { property: 'og:image', content: https://example.com/assets/images/test.png },
    ]);
   }
}