angular 相关问题

React 和 Angular 的模块联合

我正在尝试设置一个微前端项目，React 将成为 Angular 远程应用程序的主机。 这是 React 和 Angular 的 webpack 配置： Angular（远程）webpack.config.js：...

Angular Material mat-chip 上的文本颜色

我有一个 mat-chip-set 和几个带有自定义产品芯片类的 mat-chip 对象： 我有一个 mat-chip-set 和几个带有自定义 mat-chip 类的 product-chip 对象： <mat-chip-set> <mat-chip class="product-chip" *ngFor="let category of categories"> {{category}} </mat-chip> </mat-chip-set> 我的CSS是： .product-chip { background-color: pink !important; color: white !important; } 结果是芯片背景颜色是我想要的粉红色，但文字颜色仍然是黑色。 如何将 mat-chip 对象的文本颜色设为白色？ 参见 StackBlitz 示例：https://stackblitz.com/edit/angular-nzhkmg?file=src/app/chips-overview-example.html 我会编辑使用的变量。 style.css .mat-mdc-standard-chip { --mdc-chip-label-text-color: #fff; } 此外，检查其他选项的作用，以在芯片处于其他状态（禁用）时保持样式一致。 .mat-mdc-standard-chip { --mdc-chip-elevated-container-color: #e0e0e0; --mdc-chip-elevated-disabled-container-color: #e0e0e0; --mdc-chip-label-text-color: #fff; --mdc-chip-disabled-label-text-color: #212121; --mdc-chip-with-icon-icon-color: #212121; --mdc-chip-with-icon-disabled-icon-color: #212121; --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #212121; --mdc-chip-with-trailing-icon-trailing-icon-color: #212121; --mdc-chip-with-icon-selected-icon-color: #212121; } 示例：https://stackblitz.com/edit/angular-nzhkmg-dk3hsm?file=src%2Fstyles.scss 您可以创建一个指令，将文本和背景颜色作为输入，例如如下： chip-theme.directive.ts： import { Directive, ElementRef, Input, OnInit } from '@angular/core'; type ChipTheme = { backgroundColor: string; color: string; }; @Directive({ selector: '[appChipTheme]', }) export class ChipThemeDirective implements OnInit { @Input('appChipTheme') theme: ChipTheme; constructor(private el: ElementRef) {} ngOnInit(): void { const natEl = this.el.nativeElement; const { color, backgroundColor } = this.theme; // Background Color natEl.style.backgroundColor = backgroundColor; // Text Color natEl.style.setProperty('--mdc-chip-label-text-color', color); } } 然后在 HTML 模板中使用如下： <mat-chip *ngFor="let chip of chips" [appChipTheme]="{ color: chip.color, backgroundColor: chip.bgColor }"> <span>{{ chip.text }}</span> </mat-chip> 不要忘记在 app.module.ts 中导入指令。

无法在 Angular 拦截器上获取 HTTP 标头

我在响应中的nodejs（express）应用程序中设置自定义标头： res.header('Vme','true') 下一个（） 当我收到客户端的响应时，我可以在浏览器中正确地看到标题：

Moment JS 仅在客户端使用标准时间，无论时区如何

“角度”：“12.2.0” “时刻”：“^2.30.1” “时刻时区”：“^0.5.44” 该项目是一个日历调度程序。 后端：C#发送UTC时间戳；

为 Angular 教程设置本地环境

我正在学习 Angular，试图完成 angular.dev 上的“你的第一个 Angular 应用程序”教程：https://angular.dev/tutorials/first-app/01-hello-world。 本教程为您提供 .zip 下载

使用 Angular 17 在选择选项中设置默认值

我可能会被永远投票，但这已经困扰了我几个小时，无法继续下去！ 我想将 Male 设置为默认值。 这是 Angular HTML： 我可能会被永远投票，但这已经困扰了我几个小时，无法继续下去！ 我想将 Male 设置为默认值。 这是 Angular HTML： <select name="gender" id="gender" [(ngModel)]="registration.gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="others">Others</option> </select> 我的.TS文件： export class Registration implements OnInit { public patients = [] as Patient[]; public patient = {} as Patient; public registration = {} as Registration; //registration.gender = 'male'; gender = 'male'; } 我尝试了其他几种方法，但无法将 male 设置为默认选定值！请帮忙。 我们可以使用属性 gender 将值初始化为 male。 import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [FormsModule], template: ` <select name="gender" id="gender" [(ngModel)]="registration.gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="others">Others</option> </select> `, }) export class App { public patients = [] as any[]; public patient = {} as any; public registration = { gender: 'male' } as any; //registration.gender = 'male'; gender = 'male'; } bootstrapApplication(App); Stackblitz 演示

防伪令牌验证再次失败。防伪令牌无法解密

我正在为 .net+Angular 应用程序设置 Antiforgy。 我声明会话设置 builder.Services.AddSession（选项=> { options.IdleTimeout = TimeSpan.FromMinutes(20); options.Cookie.HttpOnly = ...

如果类在模板驱动形式 Angular 4 中无效，为什么类不应用于输入元素？

我的登录页面使用了模板驱动的表单。如果输入元素无效或有任何错误，我希望在输入元素上有一个红色边框，但当...

无法在 Cloudflare Pages 上部署 Angular 项目

我尝试使用 Cloudflare 免费计划从我的 Github 存储库部署我的 Angular 项目。 但失败了。如何才能成功部署？ 关于项目： 该项目不包括 SSR 或 SSG。 我添加了.nvmr...

如何解决pdf文件中的字体编码问题

当我从 acrobat reader 打开它时，我有一个 pdf 文件正确呈现，但是当我尝试在我的 Angular 应用程序中打开相同的 pdf（base 64 编码）时，它显示空白页面。 大多数fi...

在Angular中通用化服务，我想创建一个获取所有HTTP请求的服务是否可行？

我有一个问题，也许你可以帮助我，我在 Angular 17 中有一个服务，我想让该服务获取所有请求，然后，它会进行调整，以便它可以接收所有请求......

Angular 无法检测按钮单击时的属性更改

我正在使用 Angular 17，我有一个菜鸟问题。在我的组件模板中，表格的页脚有几个按钮和一个微调器，它的可见性：在开头隐藏： 我正在使用 Angular 17，我有一个菜鸟问题。在我的组件模板中，表格的页脚有几个按钮和一个微调器，其开头有 visibility: hidden： <ng-container matColumnDef="created_on"> <th mat-header-cell *matHeaderCellDef>Created On</th> <td mat-cell *matCellDef="let row">{{row.created_on}}</td> <td mat-footer-cell ...> <div class="tfooter"> <mat-paginator ... > </mat-paginator> <div class="btn-actions"> <mat-spinner diameter="35" strokeWidth="4" [style.visibility]="isDeleting ? 'show' : 'hidden'" > </mat-spinner> <button ... > Switch DB </button> <button mat-flat-button color="warn" (click)="doStuff()" > Do Stuff </button> </div> </div> </td> </ng-container> 这是组件： @Component({ selector: 'app-change-db', templateUrl: './change-db.component.html', styleUrl: './change-db.component.css' }) export class ChangeDbComponent implements OnInit, AfterViewInit { ... isDeleting: boolean = false ... doStuff() { this.isDeleting = true const dialogRef = this.dialog.open(ConfirmDialogComponent, { width: '250px', data: { db: this.getSelectedDb(), answer: false } }); // if the user clicks away from dialog, result will be undefined dialogRef.afterClosed().subscribe((result: DialogData) => { if (result?.answer) { this.isDeleting = true this.mysqlService.dropDb({ dbname: result.db }).subscribe({ next: () => { ... this.isDeleting = false this.loadData() }, error: (err: Error) => { ... this.isDeleting = false } }) } }); } } 如您所见，该组件有一个方法 dropDb()（现在仅用于测试目的）立即将 isDeleting 更改为 true。但是，Angular 更改检测系统似乎未检测到该属性，因为 UI 不显示微调器。 你能给我一些关于我做错了什么的提示吗？谢谢 根据Cee McSharpface的指定，我需要使用visible： <mat-spinner [style.visibility]="isDeleting ? 'visible' : 'hidden'"></mat-spinner> 不确定为什么将 show 与开发者工具一起使用，它的工作原理是相同的，也许 Angular 需要允许的值，并且如果传递任何其他值，则拒绝更新节点。 使用 @ngIf 或 [hidden] 具有从 DOM 中删除节点的效果。使用 visibility，它会停留在那里并占据树中的空间，避免其他元素占据空间（当它不显示时）或在它出现时移动一点。

使用 Angular 的顺风组类问题

当我创建程序时，我尝试使用顺风中的组类功能。令人惊讶的是它不起作用。比我决定一个新程序添加此代码： 当我创建程序时，我尝试使用顺风中的组类功能。令人惊讶的是它不起作用。我决定创建一个新程序并添加此代码： <div class="tw-group tw-p-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg"> <h2 class="tw-text-xl tw-font-bold tw-mb-4 tw-group-hover:tw-text-blue-500">Parent Component</h2> <button class="tw-group-hover:tw-bg-blue-500 tw-p-2 tw-bg-blue-300 tw-rounded">Hover me</button> </div> 我在 tailwind.config.js 文件中设置了一个前缀“tw-”。小组课还是不行。比我尝试删除前缀并更改所有以“tw-”开头的类。令我惊讶的是，小组课程功能按预期工作。 有人可以帮我解决这个问题吗？因为我想使用前缀 根据文档： 重要的是要了解此前缀是在任何变体修饰符之后添加的。这意味着具有响应式或状态修饰符（如 sm: 或 hover:）的类仍将具有响应式或状态修饰符 first，您的自定义前缀出现在冒号之后： <div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500"> <!-- --> </div> 因此，根据您的情况，您的 group-hover: 课程应该是 group-hover:tw-text-blue-500 和 group-hover:tw-bg-blue-500: tailwind.config = { prefix: 'tw-', } <script src="https://cdn.tailwindcss.com/3.4.3"></script> <div class="tw-group tw-p-6 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg"> <h2 class="tw-text-xl tw-font-bold tw-mb-4 group-hover:tw-text-blue-500">Parent Component</h2> <button class="group-hover:tw-bg-blue-500 tw-p-2 tw-bg-blue-300 tw-rounded">Hover me</button> </div>

Angular 将 Router 注入 CanActivateFn 以在 runInInjectionContext 中使用

我有一个守卫，需要获取异步内容，然后根据该值决定是否需要使用 URLTree 重定向用户。 代码本身非常简单： 导出 const otapGuard：CanActiva...

mergeMap 和 concatMap 链中的角度内存泄漏

我需要将 1 TB 文件夹上传到 Blob 存储，并使用 mergeMap 设计了一个并行处理管道，以使用 concatMap 通过一系列步骤处理和上传文件。每一步都...

从 ViewChild 的别名调用组件类型

所以我的角度项目中有一个index.d.ts 文件。其中我的一个组件有一个别名： 导出声明 const List: typeof ListComponent; 然后我将别名导入到我的其中一个

无法修补 PrimeNG p 编辑器组件的值

我创建了一个使用 p-editor 元素来编写富格式文本的表单，但我遇到了一个问题，编辑器创建并提交富文本，但是当我们想用...更新表单时

如何通过订阅Angular在另一个对象中使用一个对象？

我试图在这里创建两个对象：用户和管理员。我有一个有 id 的用户对象，一个有自己唯一 id idManager 的经理，以及一个来自用户的 id，OneToOne

树：树更新时如何保持打开状态

当我将新数据设置到 this.dataSource.data 时，我需要保持树节点打开/关闭状态。新数据与旧数据非常相同 - 它只是添加/删除了一个或几个最低级别的节点。 我的想法是...

如何自动将 data-testid 添加到 Angular 应用程序的所有 UI 元素

我正在开发一个有数千个 html 文件的 Angular 项目。现在我们正在尝试使用cypress 来实现UI 测试自动化。然而，我们在唯一标识UI方面面临一些困难