我有一个 Angular 模块，其中有两个子模块，一个用于用户，另一个用于管理员。当然他们共享相同的index.html文件。
在我的用户模块中，我想要 <meta name="viewport" content="width=device-width, initial-scale=1">在 <head></head> index.html 中的标签
虽然我希望它在我的管理模块中被删除，并且只保留手机的桌面 View 。
我厌倦了在管理员第一个组件构造函数中执行此操作:
import { Meta } from '@angular/platform-browser';
this.meta.removeTag('name="viewport"');
该标记正在被删除，但这是在应用程序开始呈现此元标记之后，因为它位于
index.html 中所以它没有给出想要的结果有什么建议可以有条件地实际添加这个元？
困难的部分是它应该在 index.html 的头部。
最佳答案
看来您必须手动将视口(viewport)设置为其他内容。尝试删除元标记并将其设置为其他内容，如下例所示:
https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html
如果您从移动设备查看以下示例，它将首先显示响应 View (在 index.html 中设置)，然后在 5 秒后显示桌面版本。
import { Component, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { timer } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
constructor(
private readonly meta: Meta
) { }
ngOnInit(): void {
timer(5000).subscribe(() => {
this.meta.removeTag('name="viewport"');
this.meta.addTag({ name: 'viewport', content: 'width=1000' })
})
}
}
关于angular - index.html 中的条件视口(viewport)元标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51623086/