frontend 相关问题

我有一个由 Angular 18 开发的简单 Web 应用程序。我将把一个动态属性绑定到 index.html 文件中的标签，如下所示：我有一个由 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 标签没有任何有效的角度功能。 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 演示

html angular typescript frontend single-page-application

回答 1 投票 0

在 html 输入字段的特定部分下划线

我正在开发一个 Vue 项目，其中使用 JS 包，我可以用它来检查单词拼写是否正确。我有一个函数可以将文本分割成单独的单词，然后检查它......

javascript html vue.js frontend spelling

回答 1 投票 0

直接打开 HTML 文件时 FileEntry.file() 方法无法正常工作

我正在开发拖放上传功能。通过 drop 事件，我使用 e.dataTransfer.items 检索所有文件和文件夹的句柄，然后调用 items[n].webkitGetAsEntry() 方法...

javascript html frontend drag-and-drop filesystems

回答 1 投票 0

使用 React-Hook-Form 填充表单时遇到问题

所以我一直在尝试使用react-hook-form创建一个多步骤表单，我成功地做到了这一点，作为创造价值的一种方式。但是当涉及到更新它们时。有点难。它确实适用于...