动态更新 Angular 中的元标签

我想分享一些动态内容到WhatsApp，动态内容从API获取。因此，我在 component.ts 文件中使用 Angular Meta 类来使用动态内容更新 index.html 中的默认元标记属性。

当我将 URL 导航到我想要更新 og 元标记的特定页面时。元标记已添加到 DOM 中。但是当我与 WhatsApp 共享相同的页面 URL 时。动态内容不出现。

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DMK Youth Wing</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- og meta tags for link share  -->
  <meta property="og:title" content="" />
  <meta property="og:description" content="" />
  <meta property="og:url" content="https://www.youthwingdmk.in/" />
  <meta property="og:image" content="https://www.myhealthunlimited.com/wp-content/uploads/2016/07/300x200.png" />

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="icon" type="image/x-icon" href="./assets/images/Youth wing logo2.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet">

  <!-- twitter plugin -->
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Animation -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>

<body class="scrollable">
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

</body>
</html>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, Meta } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationFormComponent } from './components/application-form/application-form.component';
import { ContactFormComponent } from './components/contact-form/contact-form.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { HomeComponent } from './components/home/home.component';
import { NavBarComponent } from './components/nav-bar/nav-bar.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { InputComponent } from './components/input/input.component';
import { HistoryFeedComponent } from './components/home/history-feed/history-feed.component';
import { HistoryComponent } from './components/home/history-feed/history/history.component';
import { FeedComponent } from './components/home/history-feed/feed/feed.component';
import { GalleryComponent } from './components/home/gallery/gallery.component';
import { YouthTeamComponent } from './components/home/youth-team/youth-team.component';
import { ReportsComponent } from './components/home/reports/reports.component';
import { FooterComponent } from './components/footer/footer.component';
import { NgSelectModule } from '@ng-select/ng-select';
import { SelectComponent } from './components/select/select.component';
import { NgxSpinnerModule } from 'ngx-spinner';
import { ToastrModule } from 'ngx-toastr';
import { SlickCarouselModule } from 'ngx-slick-carousel';
import { ErrrorInterceptor } from './interceptors/error/errror.interceptor';
import { SocialMediaComponent } from './components/nav-bar/social-media/social-media.component';
import { SlickCarouselComponent } from './components/home/gallery/slick-carousel/slick-carousel.component';
import { BannerComponent } from './components/home/banner/banner.component';
import { LoginModalComponent } from './components/home/youth-team/login-modal/login-modal.component';
import { PubCardComponent } from './components/publications/pub/pub-card/pub-card.component';
import { PubPageComponent } from './components/publications/pub/pub-page/pub-page.component';
import { PubDetailsComponent } from './components/publications/pub/pub-details/pub-details.component';
import { PubListComponent } from './components/publications/pub/pub-list/pub-list.component';
import { PaymentComponent } from './components/home/payment/payment.component';
import { LibraryComponent } from './components/library/library.component';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { PhotosComponent } from './components/photos/photos.component';
import { YoutubeVideosComponent } from './components/youtube-videos/youtube-videos.component';
import { NgImageFullscreenViewModule } from 'ng-image-fullscreen-view';
import { LoginComponent } from './login/login.component';
import { BeneficiariesComponent } from './components/home/beneficiaries/beneficiaries.component';
import { OrgChartComponent } from './components/home/youth-team/org-chart/org-chart.component';
import { OrgTreeComponent } from './components/org-tree/org-tree.component';
import { LibrarybookdetailComponent } from './components/library/librarybookdetail/librarybookdetail.component';
import { LibraryhashComponent } from './components/library/libraryhash/libraryhash.component';
import { LibraryCommentDetailsComponent } from './components/library/library-comment-details/library-comment-details.component';

import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

@NgModule({
  declarations: [
    AppComponent,
    ApplicationFormComponent,
    ContactFormComponent,
    PageNotFoundComponent,
    HomeComponent,
    NavBarComponent,
    InputComponent,
    HistoryFeedComponent,
    HistoryComponent,
    FeedComponent,
    GalleryComponent,
    YouthTeamComponent,
    ReportsComponent,
    FooterComponent,
    SelectComponent,
    SocialMediaComponent,
    SlickCarouselComponent,
    BannerComponent,
    LoginModalComponent,
    PubCardComponent,
    PubPageComponent,
    PubDetailsComponent,
    PubListComponent,
    PaymentComponent,
    LibraryComponent,
    PhotosComponent,
    YoutubeVideosComponent,
    LoginComponent,
    BeneficiariesComponent,
    OrgChartComponent,
    OrgTreeComponent,
    LibrarybookdetailComponent,
    LibraryhashComponent,
    LibraryCommentDetailsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    LayoutModule,
    NgbModule,
    HttpClientModule,
    NgSelectModule,
    NgxSpinnerModule,
    ToastrModule.forRoot({
      timeOut: 1500,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
    }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    SlickCarouselModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatFormFieldModule,
    MatInputModule,
    NgImageFullscreenViewModule,
    ShareButtonsModule.withConfig({
      debug: true
    }),
    ShareIconsModule

  ],
  providers: [
    Meta
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http);
}

pub-details.component.ts

import { Component, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { ActivatedRoute, Data, NavigationExtras, Router } from '@angular/router';
import { HttpService } from 'src/app/services/http.service';


@Component({
  selector: 'app-pub-details',
  templateUrl: './pub-details.component.html',
  styleUrls: ['./pub-details.component.scss']
})
export class PubDetailsComponent implements OnInit {

  reportData = [];
  reportId: number;

  constructor(
    private service: HttpService,
    private activeRoute: ActivatedRoute,
    private meta: Meta
  ) { }

  ngOnInit(): void {

   this.activeRoute.queryParams.subscribe(params => {
      this.reportId = +params.Id;
    }
    this.getSpecificReport(this.reportId);
  }

  getSpecificReport(id) {
    this.service.getSpecificReport(id).subscribe((res: any) => {
      this.reportData = res.Data[0].Data;

      this.meta.updateTag(
        { property: 'og:title', content: this.reportData['PostTitle'] },
      );
      this.meta.updateTag(
        { property: 'og:description', content: this.reportData['PostTitle'] },
      );
    }, (err) => { }
    );
  }

}

更新元标记后的 HTML DOM（内容已更新）

与 WhatsApp 共享相同的 URL（内容未更新）

问题描述投票：0回答：1

1个回答

最新问题

动态更新 Angular 中的元标签

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1