如何在 Angular 中将动态值绑定到 index.html 文件内容?

问题描述 投票:0回答:1

我有一个由 Angular 18 开发的简单 Web 应用程序。我将把一个动态属性绑定到 index.html 文件中的

<html>
标签,如下所示:

<!doctype html>
<html lang="en" class="h-100" [data-bs-theme]="theme">
<head>
  <meta charset="utf-8">
  <title>My app</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="h-100">
  <app-root></app-root>
</body>
</html>

我尝试在 main.ts 和 app.component.ts 文件中定义

theme
属性,但它不起作用!

可以这样做吗? 我可以在哪里定义并以编程方式更改

theme
属性? 满足此要求的最佳实践是什么?

html angular typescript frontend single-page-application
1个回答
0
投票

您可以使用

document.querySelector
获取 HTML 元素并手动设置值。

您没有更新变量的原因是因为

app-root
内的所有内容都是角度应用程序存在的位置,因此只有在此范围内绑定才有效。因此,body 和 HTML 标签没有任何有效的角度功能。

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>

    <button (click)="changeBsValue('dark')"> change theme </button>
  `,
})
export class App {
  name = 'Angular';

  ngOnInit() {
    this.changeBsValue('light');
  }

  changeBsValue(value: string) {
    const html = document.querySelector('html');
    html!.setAttribute('data-bs-theme', value);
  }
}

bootstrapApplication(App);

index.html

<!DOCTYPE html>
<html lang="en" [data-bs-theme]="''">
  <head>
    <title>My app</title>
    <meta charset="UTF-8" />
    <base href="/" />
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

样式.scss

/* Add application styles & imports to this file! */
html[data-bs-theme='light'] h1 {
  background-color: red;
}

html[data-bs-theme='dark'] h1 {
  background-color: black;
  color: white;
}

Stackblitz 演示

© www.soinside.com 2019 - 2024. All rights reserved.