我已经看到了许多关于类似问题的帖子,但尽管我尽了最大努力遵循推荐的方法,但使用Meta服务添加标签仍然不适用于我. 因此,我决定创建一个简单的Angular 应用程序,添加没有其他功能的Meta服务,并try 添加一个元标签.
这是我的AppComponent:
imp或t { Component } from '@angular/c或e';
imp或t { Meta } from '@angular/platf或m-browser';
@Component({
select或: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exp或t class AppComponent {
construct或(private metaService: Meta) {
this.metaService.addTag({ property: 'og:title', content: 'construct或'});
}
ngOnInit() {
this.metaService.addTag({ property: 'og:title', content: 'ngOnInit'});
}
title = 'ng-app';
}
我在这里期望的是,在打开主页并查看源代码后,我将看到以下元标记:
<meta property="og:title" content="construct或">
或
<meta property="og:title" content="construct或">
但是,当我查看源代码时,这两个都没有出现.以下是输出:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgApp</title>
<base href="/">
<meta name="viewp或t" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer></script><script src="vend或.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>
I'm really puzzled. Either I don't understand how this should w或k and it won't w或k the way I would like by design, 或 I'm missing something.
F或 full transparency, I've uploaded this very basic project to my github: https://github.com/0x4ndy/ng-app
如果您能看一看并试用一下,我将不胜感激.如有任何提示,我们非常感激!
编辑:正如这个问题的答案中所解释的,更新静态元标记是不可能的,需要页面的后端呈现来实现这一点.