如何使用 angular 中的数据动态添加 index.html 中的元标记？

Question

我想在 facebook 上分享一些带有标题、图片和描述的内容。为此，我需要在 index.html 中动态添加元标记。我尝试了所有可能的方面，但没有用。在 facebook 上分享后，描述、图像未显示。我搜索了很多解决方案，但对我没有用。有没有人帮我摆脱这个问题？提前谢谢

Answer 1

您可以使用 Angular 提供的 SEO 服务：Title 和 Meta 来自 @angular/platform-browser。

首先，您必须向路线添加一些数据，例如：

const routes: Routes = [
  {
    path: '', component: AboutComponent,
    data: {
      title: 'About',
      metatags: {
        'og:description': `your description here`,
        'twitter:description': `your description`,
         keywords: `your keywords here`
      }
    }
  }
];

然后在 app.component.ts 文件的方法 ngOnInit 中，您将跟踪路由器事件，并且对于每个 NavigationEnd 事件（意味着到达新页面），您将根据路线中指定的数据更新标签和标题：

ngOnInit() {
    // Change page title on navigation  based on route data
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => {
          let route = this.activatedRoute;
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
        filter(route => route.outlet === 'primary'),
        mergeMap(route => route.data)
      )
      .subscribe(event => {
        const title = event['title'];
        if (title) {
          const _title = `${environment.appName} | `;
          this.titleService.setTitle(_title);
          this.metaService.updateTag({ name: 'title', content: _title });
        }

        const tags = event['metatags'];
        if (tags) {
          for (const tag in tags) {
            this.metaService.updateTag({ property: tag, content: tags[tag] });
          }
        }
      });
  }

但是对于一些动态加载的数据，例如指定的产品，您可以在页面组件中添加此代码 product-details.component.ts :

 ngOnInit() {
    this.product$ = this.activatedRoute.data.pipe(
      switchMap((data) => this.activatedRoute.paramMap.pipe(
        // get the requested id in url to fetch the correct document
        switchMap((params) => this.productService.getProduct(params.get('id'))),
        tap((product: Product) => {
          const _title = `${environment.appName} | ${product.name}`;
          this.titleService.setTitle(_title);
          this.metaService.updateTag({ name: 'title', content: _title });
          this.metaService.updateTag({ name: 'description', content: product.description});
        }),
      )));

  }

Et voilà.

但您可能需要将 Angular Universal 添加到您的项目中，因为并非所有搜索机器人都可以分析单页应用程序，例如 Angular。

如何使用 angular 中的数据动态添加 index.html 中的元标记？

How to add meta tag in index.html dynamically with data in angular?

meta

asp.net-boilerplate

angular

angular6