angular 相关问题

我应该如何使用 Angular 为不同设备引用不同文件？

这是我的项目在18.2.8版本的结构。 在此输入图像描述 如果我用电脑查看的话，这是结构： 在此输入图像描述 我想做的是显示一个css文件

无法通过使用变量作为索引名称来访问 TypeScript 中对象的字段，除非声明为常量

我不明白为什么前两个打印输出有效，而另外两个则产生错误。 const index1 = "名称"; const 持有者：{ 字段：字符串； } = { 字段: "姓名" }; 常量工业...

Angular 18 读取资产文件夹中的 JSON 文件

在 Angular 18 中，我必须使用 HTTP 客户端读取 json 文件。我无法预测托管 URL。该站点可能托管在二级或三级子文件夹域名中。如何读取

使用 viewChild 信号后无法更改 Angular Materials 分页器值

我需要更改我的表分页器 pageIndex 和 pageSize，当我使用 ViewChild 时，我的代码运行良好，但我想使用信号查询，当我使用信号查询时，我收到此错误； 写入信号我...

有没有办法给signal的rxResource()设置一个默认值比如signal()

似乎没有办法为rxResource设置默认值，例如classique信号。 我这样做： #errorsResource = rxResource({ 请求：() => ({ ...

角度不纯管道仅在服务更改时触发

正在实现一个名为 MyService （单例）的服务，该服务具有一个名为 config 的属性，以及一个名为 MyPipe 的管道，该管道仅应在 MyService.config 时重新评估（而不是输入到...

如何使用 Node js 从 Angular 组件生成动态元数据？

我想创建一个库，其中包含由节点js代码自动生成的组件示例页面。 使用一些 Copilot 帮助，我得到了这个函数来读取组件的元数据，但它正在返回......

NX 20.2.2 + Angular 19 + Ionic 8 + Jest：最新更新后的测试失败

我一直在 NX monorepo（没有 nxtend/nxext）中维护 Ionic-Angular 应用程序一段时间，到目前为止进展顺利。 然而，最后一次迁移到 NX 20.2.2 + Angular 19 已经

Angular 5 Material - 如何设置 mat-nav-list 锚链接在单击时处于活动状态

如何将锚链接设置为在我的实现中处于活动状态。 .html 如何将锚链接设置为在我的实施中处于活动状态。 .html <mat-nav-list class="conversation-list"> <mat-list-item *ngFor="let conversation of conversations"> <a (click)="goToChat(conversation)">{{getOtherUsers(conversation)}}</a> </mat-list-item> </mat-nav-list> <div class="chat-box"> <router-outlet></router-outlet> </div> .ts goToChat(conversation) { this.router.navigate(['main/chat/', conversation._id]); } .routing.module.ts import { ChatComponent } from './chat.component'; import { ChatDetailComponent } from './chat-detail/chat-detail.component'; const CHAT_ROUTES = [ { path: '', component: ChatComponent, children: [ { path: ':id', component: ChatDetailComponent } ] }, ]; 上面的代码循环用户对话并创建他们正在聊天的用户列表。每个列表项都是指向页面右侧聊天组件的链接。当用户单击链接时，我希望将其设置为活动状态。 通过添加 routerLinkActive 指令将锚点设置为“活动”类： <mat-nav-list> <a mat-list-item routerLinkActive="active">{{link.title}}</a> </mat-nav-list> 问题是 Angular Material 包中显然没有为活动状态定义样式： 角度材料/src/lib/list/_list-theme.scss 角度材料/src/lib/list/list.scss 因此必须定义一个活动样式： .mat-nav-list a.active { background: blue; } routerLinkActive 是 routerLink 的属性，因此它只能与 routerLink 绑定一起使用。 要设置活动链接的样式，请将 routerLink 设置为路线的路径，并将 routerLinkActive 设置为您自己的类，您将使用它来指示“活动”。 例如： <a [routerLink]=`main/chat/'${conversation._id}` routerLinkActive="active-link">{{getOtherUsers(conversation)}}</a> 现在使用 css 来定位链接： .active-link { background-color: grey; } 其他答案依赖于自定义类。然而，mat-list-item有一个我们可以利用的activated输入。我们只需要让 mat-list-item 和 routerLinkActive 互相“交谈”即可。角度指令是一个完美的解决方案。 /* eslint-disable @angular-eslint/directive-selector */ import { Directive, OnDestroy } from '@angular/core'; import { MatListItem } from '@angular/material/list'; import { RouterLinkActive } from '@angular/router'; import { Subscription } from 'rxjs'; @Directive({ selector: '[mat-list-item][routerLinkActive]', standalone: true, }) export class RouterActivatedMatListItemDirective implements OnDestroy { private subs = new Subscription(); constructor(matListItem: MatListItem, routerLinkActive: RouterLinkActive) { this.subs.add( routerLinkActive.isActiveChange.subscribe((isActive) => { matListItem.activated = isActive; }) ); } ngOnDestroy() { this.subs.unsubscribe(); } } 注意选择器如何同时定位 - mat-list-item 和 routerLinkActive。这意味着我们将通过依赖注入获得两个实例。角度太棒了！ 该指令是 standalone，因此请确保将其添加到包含链接的组件的导入中，或者如果您使用 NgModules，则将其包含在相应的模块中。无需更改模板中的任何其他内容 - 它就可以正常工作！ 您可以使用 .mat-list-item-focus 类来聚焦列表项： <mat-nav-list> <mat-list-item class="mat-list-item-focus">Focused List Item</mat-list-item> <mat-list-item>Not Focused List Item</mat-list-item> </mat-nav-list> 角 19： 如果您在描述选项卡上查看 RouterLinkActive 文档： https://angular.dev/api/router/RouterLinkActive?tab=description 它说： 要直接检查链接的 isActive 状态，请分配 RouterLinkActive 实例到模板变量。例如， 以下检查状态而不分配任何 CSS 类： <a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive"> Bob {{ rla.isActive ? '(already open)' : ''}} </a> 所以你可以这样做： <mat-nav-list> <a mat-list-item routerLink="/my-route" routerLinkActive #rla="routerLinkActive" [activated]="rla.isActive">My Route</a> </mat-nav-list> 尝试使用类似的东西： <a [routerLink]="['main/chat/',conversation._id]">{{getOtherUsers(conversation)}}</a> 有关更多信息，请访问 https://angular.io/guide/router#router-links

在 Angular Signals 中，您可以使用 viewChild() +effect() 来处理子元素的更改吗？

假设我想知道组件中的特定子元素何时滚动。假设我声明： contentPanel = viewChild.required('contentPanel'); 内容滚动顶部 =

我们如何从组件的导入数组中批量删除未使用的类名？

在 Angular 19 中，我们现在会收到有关未使用的导入的警告。 （导入数组中未使用的类）。 博客文章说“自动删除” 此外，Angular 语言服务将突出显示...

默认路由解析器（Angular）

我正在尝试在 NgRx Store 中为特定页面设置一些状态（我将导致这些 POI - “感兴趣的页面”）。如果不是这些页面之一，我想将商店设置为默认值....

无限滑块不会重复列表图标，并且在重复之前会在一个周期后短暂停止

我正在使用 Angular 17、HTML、SCSS 和 TypeScript 开发无限滑块。滑块最初按预期工作，但在列表中的所有图标都显示一次后，什么都看不到......

如何使用后端请求更新 Angular 中的组件，而不刷新页面？

我想更新我的心形图标，该图标绑定到每个产品，以添加到收藏夹。 我想更新我的心形图标，该图标绑定到每个产品，以添加到收藏夹。 <i class="fa-regular fa-heart" *ngIf="!isFavourite"></i> <i class="fa-solid fa-heart" *ngIf="isFavourite"></i> 为此，我使用服务中的后端请求从数据库中获取数据，与切换相同，后端逻辑有效，唯一的问题是我每次都必须刷新页面才能看到心形图标切换。 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { environment } from '../../../../environments/environment'; import { Observable, BehaviorSubject } from 'rxjs'; import { PrimitiveProduct } from '../models/product.model'; @Injectable({ providedIn: 'root' }) export class FavouriteService { apiUrl = `${environment.apiUrl}/user/favourites`; private favouritesSubject = new BehaviorSubject<PrimitiveProduct[]>([]); favourites$ = this.favouritesSubject.asObservable(); constructor(private http: HttpClient) {} fetchFavourites(): void { this.http .get<PrimitiveProduct[]>(this.apiUrl, { withCredentials: true }) .subscribe({ next: (favourites) => { this.favouritesSubject.next(favourites); }, error: (err) => console.error('Error fetching favourites:', err) }); } toggleFavourite(productUid: string): Observable<string> { return this.http.post<string>( `${this.apiUrl}?productUid=${productUid}`, null, { withCredentials: true } ); } updateFavouritesLocally(productUid: string) { const favourites = this.favouritesSubject.getValue(); const isAlreadyFavorite = favourites.some((fav) => fav.uid === productUid); if (isAlreadyFavorite) { this.favouritesSubject.next( favourites.filter((fav) => fav.uid !== productUid) ); } else { const newFavourite: PrimitiveProduct = { uid: productUid } as PrimitiveProduct; this.favouritesSubject.next([...favourites, newFavourite]); } } } 这就是我在产品组件中使用toggleFavourite()的方式： ngOnInit() { this.favouriteService.favourites$.subscribe((favourites) => { this.isFavourite = favourites.some((fav) => fav.uid === this.product.uid); }); } toggleFavourite(event: Event) { event.stopPropagation(); this.favouriteService.toggleFavourite(this.product.uid).subscribe({ next: () => { this.favouriteService.updateFavouritesLocally(this.product.uid); }, error: (err) => { console.error('Error toggling favourite:', err); } }); } 在收藏夹组件中，我在用户帐户部分显示数据： export class FavouritesComponent implements OnInit { favouriteProducts: PrimitiveProduct[] = []; constructor(private favouriteService: FavouriteService) {} ngOnInit() { this.favouriteService.fetchFavourites(); this.favouriteService.favourites$.subscribe((products) => { this.favouriteProducts = products; }); } } 我尝试了BehaviorSubject的方法，但我仍然必须刷新页面才能看到结果。总体而言，将产品添加到收藏夹（愿望清单）效果很好，我只是对这种烦人的刷新有问题。我应该使用 localStorage 之类的东西吗？看起来很简单，但还是不知道怎么做。 这里有一些免费的指针： 使用动态类而不是 ngIf <i [class]="'fa-heart ' + isFavourite ? 'fa-regular' : 'fa-solid'"></i> 有几种不同的方法可以做到这一点 始终取消订阅。 这里有关于如何做到这一点的资源。 关于你的问题：你的 toggleFavourite 函数太复杂了。 有2种方法可以解决这个问题。 调用后端并等待结果然后显示结果 假设它有效，更新前端并继续。 你两者都在做。 我假设您正在尝试执行第 2 项操作。在您的 toggleFavourite 函数中，将对 updateFavouritesLocally 的调用移出您的订阅。 无需等待切换响应，因为您没有使用返回的任何内容。 toggleFavourite(event: Event) { event.stopPropagation(); this.favouriteService.updateFavouritesLocally(this.product.uid); // Add `.pipe()` and use it to unsubscribe this.favouriteService.toggleFavourite(this.product.uid).subscribe({ next: () => { /* empty */ }, error: (err) => { console.error('Error toggling favourite:', err); } }); 还有一点，这个选角让我很担心 const newFavourite: PrimitiveProduct = { uid: productUid } as PrimitiveProduct; this.favouritesSubject.next([...favourites, newFavourite]); 在打字稿中你应该像这样进行转换。 它要么是 PrimitiveProduct，因为这是正确的签名，要么不是。 问题可能出在该对象中缺少数据的要求中的某个地方。 我不能肯定地说。

在父DIV的特定索引处插入DOM元素

Angular 模板中有一个 DIV： 并在 .ts 文件中 让内容 = 'test1 test2 test3' 现在我正在创建新的 DIV： const newDiv = this.

子组件激活时更改路由

我想做一个带有密码重置页面的登录页面。在页面中，当我单击“重置密码”时，只有页面的一小部分会发生变化，因此视图将如下所示： 登录页面： <...

Angular HttpClient XML 响应

const headers = new HttpHeaders({ 'Content-Type': 'text/xml' }); headers.append('接受', 'text/xml'); headers.append('Content-Type', 'text/xml'); this.http.get('getxmlurl', {headers: headers}).sub...

我部署的角度应用程序收到 mime 类型错误

将我的角度应用程序从 13 更新到 16 后，我遇到以下错误： 一切都在我的服务器上的 Docker 容器中运行。所有必需的文件（index.html、main..js、...）都是

找不到模块“lodash.isequal”

当我在项目中添加模块here文件夹时，出现错误“无法在编译时找到模块‘lodash.isequal’”。我正在安装 lodash 但遇到了同样的错误。

VSCode 更新至 1.96.0 / Nx Monorepo 中的库路径无法识别

我不确定问题到底出在哪里，但是通过排除，我认为问题出在 VS Code 而不是 Nx、Typescript 或 Angular，因为我只重新启动了 VSC 并且它自行更新到了新版本