angular - podmíněný meta tag viewport v index.html

Mám angular modul se dvěma podmoduly, jeden pro uživatele a druhý pro administrátora. Samozřejmě sdílejí stejný soubor index.html.

ve svém uživatelském modulu bych chtěl mít <meta name="viewport" content="width=device-width, initial-scale=1"> v <head></head> značkách v index.html

I když chci, aby to bylo odstraněno v mém administrátorském modulu a aby byla pro telefony pouze zobrazení na ploše, jak je.

Snažil jsem se to udělat v konstruktoru prvního komponentu administrace:

import { Meta } from '@angular/platform-browser';
this.meta.removeTag('name="viewport"'); 

štítek je odstraňován, ale to je poté, co aplikace začala zobrazovat s existencí tohoto meta štítku, protože je v index.html, takže to neposkytuje požadovaný výsledek

Máte nějaké návrhy, jak tuto meta značku skutečně podmíněně přidat? Nejtěžší je, že by měla být v hlavičce souboru index.html.

Odpověď č. 1

Zdá se, že musíte ručně nastavit viewport na něco jiného. Zkuste odstranit meta tag a nastavit ho na něco jiného, například v tomto příkladu:

https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

Pokud si následující příklad prohlédnete z mobilu, zobrazí se nejprve zobrazení pro mobilní zařízení (nastavené v index.html) a po 5 sekundách se zobrazí verze pro počítač.

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' })
    })
  }

}