首页 > 解决方案 > 使用 Angular 6.1 的页面视图源上不显示元标记

问题描述

我正在使用Angular,我想动态添加元标记。

我正在使用表单:https ://www.npmjs.com/package/@ngx-meta/core

npm install @ngx-meta/core --save

我尝试了下面的代码,它显示在检查元素(控制台)中,但它没有显示在源代码中:

 import { NgModule } from '@angular/core';
import { MetaGuard } from '@ngx-meta/core';

import { MetaModule, MetaLoader, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core';

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ChildrouterComponent } from './about/childrouter/childrouter.component';

const routes: Routes = [
  {
    path: '',
    canActivateChild: [MetaGuard],
    children: [
      {
        path: 'home',
        component: HomeComponent,
        data: {
          meta: {
            title: 'home home',
            keywords: 'home,home,home,home,home',
            description: 'Home, home sweet home... and what?',
            'og:image': 'https://upload.wikimedia.org/wikipedia/commons/f/f8/superraton.jpg',
            'og:type': 'website',
            'og:locale': 'en_US',
            'og:locale:alternate': 'en_US,nl_NL,tr_TR'
          }
        }
      },
      {
        path: 'about',
        component: AboutComponent,
        data: {
          meta: {
            title: 'about hello',
            keywords: 'about,about,about,about,about,about,about',
            description: 'Have you seen my rubber hello?',
            'og:image': 'https://upload.wikimedia.org/wikipedia/commons/f/f8/superraton.jpg',
            'og:type': 'website',
            'og:locale': 'en_US',
            'og:locale:alternate': 'en_US,nl_NL,tr_TR'
          }
        }
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        data: {
          meta: {
            title: 'dashboard hello',
            keywords: 'dashboard,dashboard,dashboard,dashboard,dashboard,dashboard,dashboard',
            description: 'Have you seen my dashboard hello?',
            'og:image': 'https://upload.wikimedia.org/wikipedia/commons/f/f8/superraton.jpg',
            'og:type': 'website',
            'og:locale': 'en_US',
            'og:locale:alternate': 'en_US,nl_NL,tr_TR'
          }
        }
      }
    ]
  }
]

@NgModule({
  imports: [RouterModule.forRoot(routes),
  MetaModule.forRoot()
  ],

  exports: [RouterModule]
})
export class AppRoutingModule { }

它在检查元素中工作正常,但在页面视图源中没有显示任何元标记。

标签: tagsangular6showmeta

解决方案


推荐阅读