angular-services 相关问题

Angular 17 @ngrx/signals 或全局服务，该使用什么？

在 Angular 应用程序中哪种方法更好 - 使用 ngrx/signals 库还是全局服务？在我的应用程序中，我有一个对象即使在之间切换时也需要保持不变

Angulat 17 @ngrx/signals 或全局服务，该使用什么？

在 Angular 应用程序中哪种方法更好 - 使用 ngrx/signals 库还是全局服务？在我的应用程序中，我有一个对象即使在之间切换时也需要保持不变

由于 Observable 订阅，Angular 组件未在浏览器中加载

在此组件中，当我在 ngOninit 中调用 getCurrentSalahOrIqamah 函数时，因此我的组件未加载到浏览器中。并保持卡住状态。 我尝试使用延迟加载的急切加载组件...

如何使用 Angular 17 中的服务在组件之间共享数据

我想使用服务在所有组件（不一定相关）之间共享一个值。 网上有很多例子，但对我不起作用，我不知道我做错了什么。

Angular 17 未使用 Socket.io 渲染组件

我有以下 Angular 组件，其唯一属性是 ConnectionService 服务的实例： 从 '@angular/core' 导入 { Component } ； 从 '@angular/common' 导入 { CommonModule } ； 我...

不需要的自动更新让我又死记硬背

我有一个组件监视列表组件，当单击事件发生时，该组件应该调用另一个组件 search-home-component 中的方法。这是我的监视列表组件： 观看列表... 我有一个组件监视列表组件，当单击事件发生时，该组件应该从另一个组件 search-home-component 调用方法。这是我的监视列表组件： <p>watchlist works!</p> <div class="alert alert-light alert-dismissible" *ngFor="let item of watchlistList" (click)="searchClickedTicker(item.tickerSymbol)" style="cursor: pointer;"> <button class="btn-close" type="button" data-bs-dismiss="alert" (click)="removeFromWatchlist(item.tickerSymbol); $event.stopPropagation();"></button> <p>watchlist item 1: {{item.tickerSymbol}} and {{item.companyName}}</p> </div> import { Component } from '@angular/core'; import { OnInit } from '@angular/core'; import { AppServiceService } from '../app-service.service'; import { SearchService } from '../search.service'; import { Subscription } from 'rxjs'; @Component({ selector: 'app-watchlist', templateUrl: './watchlist.component.html', styleUrl: './watchlist.component.css' }) export class WatchlistComponent implements OnInit { private tickerClickedSubscription: Subscription | undefined; constructor(private service: AppServiceService, public searchService: SearchService){} public watchlistList: any[] = []; ngOnInit(){ console.log('Watchlist Iniitalised'); // some code here } searchClickedTicker(ticker: string){ console.log("div clicked", ticker); this.searchService.sendTickerClicked(ticker); } } 这是我的搜索主页组件： import { Component, OnChanges, ViewChild, input, OnDestroy, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { AppServiceService } from '../app-service.service'; import { SearchResultsComponent } from './search-results/search-results.component'; import { SearchService } from '../search.service'; import { FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {MatFormFieldModule} from '@angular/material/form-field'; import { Subscription } from 'rxjs'; import { EventEmitter,Output } from '@angular/core'; @Component({ selector: 'app-search-home', templateUrl: './search-home.component.html', styleUrls: ['./search-home.component.css'] }) export class SearchHomeComponent implements OnDestroy, OnInit{ private tickerClickedSubscription: Subscription | undefined; constructor(private router: Router, private route: ActivatedRoute, private service: AppServiceService, public searchService: SearchService, private fb: FormBuilder) { } ngOnInit(){ this.tickerClickedSubscription = this.searchService.tickerClicked$.subscribe(ticker => { this.searchTicker(ticker); }); } searchTicker(searchInputValue: string) { //search ticker implementation this.autoUpdateInterval = setInterval(() => { this.updateResults(searchInputValue); }, 15000); } updateResults(inputValue: string){ //more code this.router.navigate(['/search', inputValue]); } //some other code ngOnDestroy(): void { if (this.tickerClickedSubscription) { //this.tickerClickedSubscription.unsubscribe(); console.log('unsubscribed from tickerClickedSubscription'); } } } 我使用了一项服务，允许一个组件调用另一个组件的方法： import { Injectable } from '@angular/core'; import { Observable,Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class SearchService { private tickerClickedSource = new Subject<string>(); tickerClicked$ = this.tickerClickedSource.asObservable(); constructor() {} sendTickerClicked(ticker: string) { console.log('sendtickerclicked called') this.tickerClickedSource.next(ticker); } } 由于 search-home 组件中的 searchTicker 方法具有一些自动更新功能（以及导航到另一条路线），因此即使我位于监视列表组件内，我也会导航到该路线。我只想在主组件内部时看到自动更新（或者至少我不想在监视列表组件内部时自动移动到另一条路线）。 我尝试取消订阅主页组件中 tickerClickedSubscription 上的 ngDestroy，但它实际上会禁用整个服务，并且当 (click)="searchClickedTicker(item.tickerSymbol) 发生时什么也不会发生。我还尝试使用 authGuard 来阻止导航到其他路线，但是我无法弄清楚。 我将不胜感激任何帮助！ 您可以在 stackblitz 上创建示例吗？也可能发生这种情况是因为您在 clearInterval(this.autoUpdateInterval) 中缺少 ngOnDestroy。 https://developer.mozilla.org/en-US/docs/Web/API/clearInterval

角度窗口调整大小性能

我正在创建一个 Angular 响应式应用程序，其中有超过 10 个断点，我必须将元素分组到不同的容器中。考虑到这一点，我相信我无法获得优势......

如何在 Angular 应用程序和 Angular 元素之间共享服务

我有一个角度应用程序升级到角度9，我在其中使用角度元素，它也升级到角度9。我有一个服务模块（角度9），我正在我的角度应用程序中导入它。我的

谁有责任在 Angular 中实例化“后台”服务？

我正在关注服务工作者的 Angular 文档 (https://angular.io/guide/service-worker-communications)。该页面列出了一系列用于处理 Service Worker 的服务示例

角度反应性和通过服务进行通信

几乎所有情况下，如果您搜索通过服务进行跨组件通信的示例，这些示例都会在服务内部使用 RxJS（现在也可以是信号）。不过好像不太...

在 Angular 2 中测试服务时，NgModule“DynamicTestModule”的提供程序无效

我有以下服务： 从 '@angular/core' 导入 { Injectable } ； 从 './../classes/menu-item' 导入 { MenuItem } ； 从'./../static-data/items-list'导入{ITEMS}； @Injectable() 电子...

如何创建html select，在select更改时触发相关的Angular服务方法调用

我想创建一个包含下拉/选择的 Angular 组件，用户可以在多个服务的多个方法之间进行选择，并且所选方法将在选择时调用...

如何从配置外部向 $translateProvider 添加翻译？

我是角度js新手。对于语言翻译，我在工作中使用 Angular-Translate 服务。我正在通过 API 调用 res 获取需要在 $translateProvider 中分配的完整翻译...

即使我们可以用服务做所有事情，为什么我们还需要 NgRX？ [已关闭]

我参与过一些 Angular 2+ 项目，但我仍然想知道为什么我们需要 NgRX。 我可以用服务来实现一切，而且它们似乎更容易理解。 我不确定这是否...

错误 NG8002：无法绑定到“owlDateTimeTrigger”，因为它不是“input”的已知属性

嗨我需要在 Angular 16 microfrontent 中添加 owlDateTimeTrigger 但它显示错误。请检查下面的屏幕截图。 代码： 嗨，我需要在 Angular 16 microfrontent 中添加 owlDateTimeTrigger 但它显示错误。请检查下面的屏幕截图。 代码： 谢谢 确保您的 OwlDateTimeModule 中导入了模块 OwlNativeDateTimeModule 和 app.module.ts import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime'; ... @NgModule({ declarations: [ ... ], imports: [ ... OwlDateTimeModule, OwlNativeDateTimeModule, ... ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } stackblitz 演示不是我做的

错误 NG2012：组件导入必须是独立组件、指令、管道，或者必须是 NgModules

如果我们在 Angular 独立组件和 app.module 中添加一些依赖项，则会显示以下错误： 错误 NG2012：组件导入必须是独立组件、指令、管道，或者必须是 NgModules

如何在 Angular 17 的服务中添加角度管道？

我有两个具有相同功能的组件，它们内部调用管道货币，作为一个组件，我可以正确实例化它。 我想将这两个函数移动到一个服务中并调用它，但我不能

Angular 服务未在延迟加载组件中初始化

我有一个 Angular 应用程序，其中有一个带有表格的组件。当我单击表格时，我想使用路由器更改视图并将该行传递给其他组件。我正在使用共享的可注射服务...

@angular/core/@Inject() 结果出现错误：NullInjectorError：没有提供者

我找到了几篇关于该主题的帖子，但我显然遗漏了一些东西。 我的主要目标是使用需要参数的 Injectable。 我发现正确的方法是使用装饰器@Inject。 ...

从服务传递后，模板中未提供来自 Angular 服务的数据

使用 Django 创建 API 后端后，我尝试获取一个 Angular 组件来显示提供的数据，以创建所有获取的数据集的列表。 我能够在 service.spec.ts run 中进行测试...