我有一个由 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
属性?
满足此要求的最佳实践是什么?
您可以使用
document.querySelector
获取 HTML 元素并手动设置值。
您没有更新变量的原因是因为
app-root
内的所有内容都是角度应用程序存在的位置,因此只有在此范围内绑定才有效。因此,body 和 HTML 标签没有任何有效的角度功能。
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);
<!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>
/* 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;
}