标签: angular-services

今天我进行了一次讨论，我的一些同事说他们像这样注入 Angular 服务：

constructor(readonly language: I18nService)

他们说他们这样做是因为它可以防止我的组件的使用者更改注入的服务，有点像这样：

@Component({ ... })
class ComponentA {
    constructor(public language: I18nService) {}
}

@Component({ ... })
class ComponentB {
    @ViewChild(ComponentA) compA: ComponentA;
    constructor() {
        this.compA.language = new I18nService();
    }
}

因此，虽然从技术上讲他们是对的，但我仍然不相信我应该这样做。我问自己以下问题：

1. DI 是 Angular 的基本组成部分。如果有人真的这么做了，这个人是应该更好地进入这个坑并失败，还是他/她根本做不到？

2. readonly在这种情况下，对于刚开始学习 Angular 和 TypeScript 的人来说，理解起来可能相当复杂，原因有几个

   • Angular 在其任何官方 DI 文档中均未使用此方法
   • 您需要知道它是如何readonly工作的，并且它只是保护我注入的服务的引用，但没有任何属性

3. 在我看来，这是一个极端情况问题，尽管有一个简单的解决方案

你怎么认为？有没有我可能没见过的官方参考资料？readonly当我尝试在 Angular 概念中使用 google 时，我没有找到任何内容

最后一句话：虽然它是 100% 真实的 - 可以操纵参考public service: Service- 我仍然不确定这个问题是否应该得到解决，并且纠结是否要这样做。

我想做的很简单.用户输入一个值,就按一下按钮,我叫JS中检索我的JSON数据和执行上对JSON输入的值搜索的服务,如果发现匹配,显示"所有者".

HTML:

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <input type="text" ng-model="enteredValue">
        </br>
        <button type="button" ng-Click="findValue(enteredValue)">Search</button>
    </div>
</div>

JS:

angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) {   

    $scope.findValue = function(enteredValue) {     
        alert("Searching for = " + enteredValue);

        $scope.MyData = [];

        getDataService.getData(function(data) {

            $scope.MyData = data.SerialNumbers;

        });
    }

});

angular.module('myApp', []).factory('getDataService', function($http) {
    return {
        getData: function(done) {
            $http.get('/route-to-data.json')
            .success(function(data) { 
                done(data);
            })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

我的JSON:

{
    "SerialNumbers": {
        "451651": [
            {
                "Owner": "Mr Happy"
            }
        ],
        "5464565": …

我有以下服务:

import { Injectable } from '@angular/core';

import { MenuItem } from './../classes/menu-item';
import { ITEMS } from './../static-data/items-list';

@Injectable()
export class ItemsListService {

    getItems(): Promise<MenuItem[]> {
        return Promise.resolve(ITEMS);
    }

}

这项服务的测试在这里:

import { TestBed, async, inject } from '@angular/core/testing';

import { ItemListService } from './item-list.service';
import { MenuItem } from './../classes/menu-item';
import { ITEMS } from './../static-data/items-list';

describe('ItemListService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [ ItemListService, MenuItem, ITEMS ]
    });
  });

  it('should ...', inject([ItemListService], (service: ItemListService) => …

我有一个与api通信的anuglar2项目.最近,我决定集成ngrx/store来维护组件的状态,并遵循dump-smart组件架构.但是在继续前进的过程中,我读到了可以用于api请求的ngrx/effect.

在这里我的问题来了,为什么我应该使用ngrx/effect库,而不是从我的容器组件调用我的服务中的相应函数来执行api请求和成功调度操作以将返回的值保存在我的商店中.

我已经习惯了Angular 2,但我有一些关于app.module.ts文件的问题.

• 为什么我必须在此文件中执行导入,因为我将在app.components.ts文件中再次执行输入.

例如:我导入我的自定义管道,然后我必须在我的app.components.ts文件中导入它

import { FirstPipePipe } from './first-pipe.pipe';

@NgModule({
     declarations: [
       AppComponent,
       SecondComponent,
       ThirdComponent,
       FirstComponent,
       FirstPipePipe
     ],
     imports: [
       BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
     ],
     providers: [FetchDataService],
     bootstrap: [AppComponent]    })

然后我有了

imports: [
           BrowserModule, RouterModule.forRoot(appRoutes), HttpModule
         ],

为什么我要导入一些类而不是其他类？

为什么这里的提供者再次出现在 app.component.ts中

providers: [FetchDataService]

基本上,我必须重写app.component.ts文件中的所有内容.

app.module.ts的目的是什么？

角度依赖注入允许您使用令牌而不是服务类注入字符串,函数或对象.

我在我的模块中声明它是这样的:

providers: [{ provide: MyValueToken, useValue: 'my title value'}]

我这样使用它:

constructor(@Inject(MyValueToken) my_value: string) {
  this.title = my_value;
}

但是,如何更新组件中的值并让其他组件每次都获得新值？换句话说,我想模拟使用类似a BehaviorSubject来发射和接收值的功能.

如果这不可能,那么如果它们仅提供静态数据,那么这些注入令牌值的用途是什么,而我可以简单地在我的组件中声明静态值并直接使用它.

在 Angular 9 中，可注入装饰器选项providedIn有一个名为any. root和 和有any什么区别？

在我使用的情况下，服务是否被视为单例any？

@Injectable({providedIn: 'any'})
class UsefulService {
}

我的目标是将数据从Angular组件发送到服务并使用服务方法来处理它.例:

export class SomeComponent {
    public data: Array<any> = MyData;
    public constructor(private myService: MyService) {
      this.myService.data = this.data;
    }
}

和服务:

@Injectable()
export class TablePageService {
    public data: Array<any>;
    constructor() {
        console.log(this.data);
        // undefined
    }
}

获取数据是不确定的.如何使其工作？

我无法将服务注入Angular 4.x中的另一个服务并收到错误: Error: No provider for SkillsService!

我创建了一个repo来重现这个错误.您可以通过克隆repo本地运行它,只需ng test从repo根目录运行.

我采取的步骤......

1. 使用创建应用 ng new
2. 使用创建ContactService ng g service contact
3. 使用创建SkillsService ng g service skills
4. 将SkillsService添加到ContactService的构造函数(使用@Inject批注)
5. 将SkillsService和ContactService作为提供者添加到app.module.ts
6. 运行ng test并收到错误:Error: No provider for SkillsService!

如何为SkillsService的ContactService添加提供程序？

似乎它必须是非常简单的东西,但它很难从文档和搜索中解决.

域名注册地址：

我如何将 Angular (6) 服务的一个实例用于一组（实例）组件（和指令），并将另一个实例用于另一组相同组件。

或提供更多信息：

我目前正在为基于 Angular 6 的应用程序中的表添加排序功能。因为我使用的是自定义样式（基于实体化），所以大多数库都不适合我。我发现了这个很好的例子，虽然它完全独立于所使用的样式。

它创建了一个SortableColumnComponent被添加到每个<th>标题和一个SortableTableDirective被添加到<table>元素的。他们通过一个SortService基本上只提供一个 RxJS 主题的 a 进行通信，以便在排序方向/属性发生变化时通知其他列。

这里的问题是，只要一次只显示一个可排序的表格，这个方法就很好用。但是，一旦添加更多，一次只能对一个应用排序（因为它们都共享相同的服务）。

根据angular docs，当您仅将服务注入应用程序根目录时（我这样做），它会自动成为单例。因此，我尝试仅将其注入 sortableColumn：

@Component ({
    selector: '[sortable-column]',
    templateUrl: './sortable-column.component.html'
    providers: [SortService]
})

但随后每一列似乎都有自己的服务版本，并且可以同时进行排序（这显然无法按预期工作）。

所以总体问题是：如何将一个角度服务的一个实例分配给一个（a 的实例）组件 (the SortableTableDirective)，并将匹配的 SortableColumnComponent组件和同一服务的另一个实例分配给其他表。

为了更清楚地说明这一点，这就是我想要实现的目标：

-------------------------------------------------------------------------
| page                                                                  |
|                                                                       |
| table 1 - SortableTableDirective - using instance 1 of sortingservice |
|   th 1 - sortablecolumncomponent - using instance 1 of sortingservice | …