angular 相关问题

从（服务器发送的）EventSource 创建 RxJS Observable

我想从EventSource（服务器发送事件）创建一个RxJs Observable。 我尝试了以下方法： 从 'angular2/core' 导入 {Component, OnInit}; 从 'rxjs...

“AppComponent”类型上不存在属性“alertService”和“options”

我正在我的应用程序中实现警报服务，但是我收到错误属性“alertService”在类型“AppComponent”上不存在并且属性“选项”在类型“AppComponent”上不存在...

Angular Material mat-nav-list 活动路线

我正在发现有角度的材料，并且我正在努力寻找在导航组件中突出显示激活路线的正确方法。我注意到导航中默认情况下并未完成此操作

为什么我的 RxJs 主题没有按预期工作？

ProductGalleryComponent.html 迭代产品。每个图像的单击事件都会调用 setSelectedProduct 函数，并将被单击的产品传递给它。 ProductGalleryComponent.html 迭代产品。每个图像的点击事件都会调用 setSelectedProduct 函数，并将被点击的产品传递给它。 <div class="row py-3 px-2" style="background: #f5f6f8"> <div class="col d-flex flex-column col-12 col-md-4 col-lg-3 mb-4 gallery-img-col" *ngFor="let product of products" > <img class="gallery-img" src="assets/img/{{ product.images[0] }}" (click)="setSelectedProduct(product)" /> </div> </div> ProductGalleryComponent.ts 的 setSelectedProduct 函数调用 ProductGalleryService 的 setSelectedPROduct 函数，传递选定的产品。然后导航到 SelectedProductComponent。 public setSelectedProduct = (product: ProductModel) => { this.productGalleryService.setSelectedProduct(product); this.router.navigateByUrl('/selected-product'); } ProductGalleryService 声明一个主题和该主题的可观察对象。在 setSelecedProduct 函数中，它调用主题的下一个函数，并将所选产品传递给它： export class ProductGalleryService { public selectedProductSubject = new Subject<ProductModel>(); selectedProductSubject$ = this.selectedProductSubject.asObservable(); public setSelectedProduct = (product: ProductModel) => { this.selectedProductSubject.next(product); } } SelectedProductComponent 通过构造函数订阅 ProductGalleryService 的 selectedProductSubject。预计会收到 ProductGalleryService.selectedProductSubject 广播的产品，但从未收到该产品。 export class SelectedProductComponent { private productGalleryService = inject(ProductGalleryService) constructor() { this.setSelectedProduct() } private setSelectedProduct = () => { this.productGalleryService.selectedProductSubject$.subscribe((product) => { this.selectedProduct = product; console.log('selectedProductSubject.selectedProduct', this.selectedProduct) }) } } 我相信 ProductGalleryService.selectedProductSubject$ 主题在 SelectedProductComponent 订阅之前已经发出。 如何解决这个问题？ RxJS 提供了另一种类型的主题 - ReplaySubject。 当订阅 ReplaySubject 时，它将重新发出之前推送的任何值。 ReplaySubject 有一个缓冲区大小，即要存储和重新发出的项目数。对于你的用例，我相信你只关心最后一个，所以 BufferSize 是 1。 public selectedProductSubject = new ReplaySubject(1);

Angular SSG 预渲染在渲染大量 url 时会超时（V17+）

我有 Angular v19 应用程序，并且我正在使用 SSG 和以下 angular.json 设置 { ... “预渲染”：{ “routesFile”：“prerender-urls.txt”...

为什么 TypeScript 将 Observable<IdentityToken | null> 推断为 Observable<IdentityToken>

我正在开发一个 Angular 服务，其中使用BehaviorSubject 来管理 IdentityToken。 BehaviorSubject 被实例化为BehaviorSubject。然后我得出一个新的

CommonModule 与 Angular 中的独立指令导入性能

在最近的 Angular 版本（>=17）中，如果我们想使用 Pipe 或像 NgClass 这样的指令，我们可以遵循两种方法： 导入通用模块。例如： 从'@angular/comm...导入{CommonModule}...

Angular：如何根据条件阻止 RouteReuseStrategy？

我试图根据某些条件阻止 RouteReuseStrategy，但这没有发生。我有一个名为 comp-a 的路线名称，它以两种不同的方式调用。 1 次来自后退按钮和

如何删除 Angular Material 日期选择器的下划线

我想删除日期选择器的下划线。 通过使用检查我做到了，但它不能通过CSS工作。我怎样才能通过css做到这一点 ::ng-深{ &.mdc-line-ripple::after{ 边框底部样式：无！

有没有办法将自适应卡片设计器与Angular@最新版本集成

我想将自适应卡片设计器集成到 Angular 应用程序中。我在 stackblitz 上创建了一个应用程序。但我在加载 CSS 和 Monaco 编辑器时遇到问题。 请任何人...

鼠标悬停时出现 2 个工具提示

这是我的代码。我在 Safari 中收到 2 个工具提示。我想要一个我已经准备好的工具提示。 您能让我知道如何使默认浏览器工具提示消失吗？ 这是我的代码。我在 Safari 中收到 2 个工具提示。我想要一个我已经准备好的工具提示。 您能否告诉我如何使默认浏览器工具提示消失？ <div [attr.id]="'nodeRow-'+node.id" [ngClass]="selectedID===node.id?'node-title-active':'node-title-inactive'" class="row node-title" (mouseenter)="overlayEffecton(node)" (mouseleave)="overlayEffectoff(node)" matTooltip="{{node.name}}" matTooltipPosition="right" matTooltipHideDelay="3" matTooltipClass="right"> 看起来您的框架正在渲染的页面上生成标题属性。您需要将 title 属性设置为空。 示例代码（未经测试）： import { Directive, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '[disableTitleTooltip]' }) export class DisableTitleTooltipDirective { constructor(private el: ElementRef, private renderer: Renderer2) { this.renderer.setAttribute(this.el.nativeElement, 'title', ''); } } 并将选择器添加到您的元素中： <div [attr.id]="'nodeRow-'+node.id" [ngClass]="selectedID===node.id?'node-title-active':'node-title-inactive'" class="row node-title" (mouseenter)="overlayEffecton(node)" (mouseleave)="overlayEffectoff(node)" matTooltip="{{node.name}}" matTooltipPosition="right" matTooltipHideDelay="3" matTooltipClass="right" disableTitleTooltip>

我正在尝试增加我的 Angular 应用程序的 JavaScript 堆内存，这导致应用程序崩溃

我正在开发一个使用 Angular 作为前端的多层电子商务应用程序。当我使用 ng 服务提供应用程序时，应用程序将提供给我的本地主机，但稍后会提供服务

删除每行的逗号

我能够按照我的预期格式化 json 数据，这是我迄今为止尝试过的以下代码片段： 常量数据 = [ { “身份证”：654298， “包括”： [ { &q...

如何使用 rxjs 有条件地重复承诺

我想有条件地使用 rxjs 重复一个返回 Promise 的 API 调用。 API 方法接收一个 id，每次调用时都会通过向其添加计数器前缀来更改该 id。来电...

将滚动条移动到内部 div 后自动滚动不再起作用

我在 Angular 中使用 Angular Material 进行拖放时遇到问题。我将滚动条从其原始位置移动到内部 div，但现在自动滚动不再起作用。我创建了一个 StackBlitz

拖放角度内部滚动条

我在 Angular 中使用 Angular Material 进行拖放时遇到问题。我将滚动条从其原始位置移动到内部 div，但现在自动滚动不再起作用。我创建了一个 StackBlitz

:host::ng-deep .class 和 .class :host::ng-deep 之间的区别？

scss中下面两个有什么区别， 在代码片段中举一些例子。 :host::ng-deep .content-body { ... } 和 .content-body :host::ng-deep { ... }

Angular 类未显示在手机和平板电脑上

我有 3 种完全不同的设计，适用于移动设备、平板电脑和台式机。我决定将 Angular Signals 与媒体查询结合使用来了解 Angular 应用程序的状态。错误在于尽管

injectQuery() 的 Angular Tanstack 查询显式类型

我正在尝试在 Angular 中使用 Tan 堆栈查询，而我的 VS Code 一直在抱怨我必须明确提及注入查询结果的类型为 CreateQueryResult；什...

如何将 pTooltip 附加到 p-slider 的手柄（prime-ng 角度组件）

我在 Angular 应用程序中使用 prime-ng 组件库。 我使用 p-slider 组件： 我在 Angular 应用程序中使用 prime-ng 组件库。 我使用 p-slider 组件： <p-slider id="slider" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue"></p-slider> 我想向 p 滑块手柄添加工具提示（粘贴并显示在手柄上方）。当我将 [pTootip] 指令添加到 p-slider 组件时，工具提示显示在滑块上，而不是手柄上。 <p-slider id="slider" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue" [pTooltip]="rankItem.itemSliderNumber"></p-slider> 如何将工具提示粘贴到滑块的手柄上？ 经过一番调查，我可以确认没有简单的解决方案。最后我扩展了 ng-prime 工具提示指令： import {AfterViewInit, Directive, ElementRef, Input, Renderer2} from '@angular/core'; import {DomHandler, Tooltip} from "primeng/primeng"; @Directive({ selector: '[ext-tooltip]' }) export class ExtendedTooltipDirective extends Tooltip implements AfterViewInit { @Input('ext-tooltip') _text: any; @Input('stickTo') stickTo: string; constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2) { super(el, domHandler, renderer); } ngAfterViewInit(): void { this.el = new ElementRef(this.el.nativeElement.querySelector(this.stickTo)); } } 该指令可以用作工具提示指令，但它具有附加属性 StickTo，在可能的情况下使用查询来获取组件内的元素，工具提示应附加到该元素。对于 p-slider，我们可以使用 hanler 的类“.ui-slider-handle”。 <p-slider [ext-tooltip]="rankItem.itemSliderNumber" stickTo=".ui-slider-handle" tooltipPosition="top" [(ngModel)]="rankItem.itemSliderNumber" class="slider" [step]="sliderStep" [min]="0" [max]="rankItem.itemSliderMaxValue" ></p-slider> prime-ng 工具提示的所有原始属性也可以使用。 在当前版本中，PrimeNG 原生支持此功能，无需任何扩展： <p-slider [(ngModel)]="daysAheadSelector" pTooltip="{{daysAheadSelector}}" styleClass="w-56" (onSlideEnd)="updateOlyMovements()" [min]="3" [max]="10" />