我正在使用 Angular ,我想动态添加元标记。
我正在使用表单:https://www.npmjs.com/package/@ngx-meta/core
npm install @ngx-meta/core --save
我尝试了下面的代码,它显示在inspect元素(控制台)中,但未显示在源代码中:
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 { }
在检查元素中工作正常,但在查看源代码页面中未显示任何元标记。