要在Angular Universal中添加/更新Facebook分享的元标签,您可以通过以下步骤来实现:
@angular/platform-server
库。npm install @angular/platform-server --save
server.ts
的文件,并在其中添加以下代码:import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from './path/to/your/app.server.module.ngfactory';
import * as fs from 'fs';
import * as path from 'path';
import * as express from 'express';
import { Request, Response } from 'express';
const app = express();
app.get('*', (req: Request, res: Response) => {
const baseUrl = req.protocol + '://' + req.get('host');
const url = baseUrl + req.originalUrl;
const indexHtml = fs.readFileSync(path.resolve(__dirname, '../dist/browser/index.html'), 'utf-8');
renderModuleFactory(AppServerModuleNgFactory, {
url,
document: indexHtml,
extraProviders: [
{
provide: 'APP_BASE_URL',
useValue: baseUrl
}
]
}).then(html => {
res.send(html);
});
});
app.listen(4000, () => {
console.log('Angular Universal server listening on port 4000');
});
index.html
文件中,将Facebook分享的元标签添加到
部分。
MetaService
的服务:import { Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';
@Injectable()
export class MetaService {
constructor(private meta: Meta) {}
updateMeta(image: string, title: string, description: string) {
this.meta.updateTag({ property: 'og:image', content: image });
this.meta.updateTag({ property: 'og:title', content: title });
this.meta.updateTag({ property: 'og:description', content: description });
}
}
MetaService
来更新元标签。例如,在AppComponent
中:import { Component, OnInit } from '@angular/core';
import { MetaService } from './path/to/meta.service';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements OnInit {
constructor(private metaService: MetaService) {}
ngOnInit() {
const image = 'http://example.com/path/to/image.jpg';
const title = 'My Awesome App';
const description = 'Check out my awesome app!';
this.metaService.updateMeta(image, title, description);
}
}
现在,当您通过Angular Universal渲染页面时,Facebook分享将包含您提供的预览图像、标题和描述信息。
请注意,您需要根据您的项目结构和需求进行相应的调整。这只是一个示例,您可能需要根据您的实际情况进行一些修改。