相关疑难解决方法(0)

使用相同服务的多个实例

我有一个服务,像这样:

@Injectable()
export class EditorService { ... }
Run Code Online (Sandbox Code Playgroud)

我有一个组件,像这样:

@Component({
    ...
    template: `<child-component></child-component>`,
    providers: [EditorService],
    ...
})
export class SomeComponent {
    constructor(
        private _appleEditorService: EditorService,
        private _pearEditorService: EditorService) {}
}
Run Code Online (Sandbox Code Playgroud)

您可能已经注意到,此组件具有子组件:

@Component({
    ...
    selector: 'child-component',
    ...
})
export class ChildComponent {
    constructor(
        private _appleEditorService: EditorService,
        private _pearEditorService: EditorService) {}
}
Run Code Online (Sandbox Code Playgroud)

如您所见,我想要两个我的实例EditorService:一个用于编辑苹果,一个用于编辑梨.但是,上面的代码不起作用,因为Angular无法知道哪个实例的EditorService变量名是私有的._pearEditorServiceChildComponent还不如指同一个实例_appleEditorServiceSomeComponent.

问题:那么,我可以两次使用相同的Angular2服务吗?

编辑:我的问题的关键是如果可以使用相同的类.我知道有一些解决方法是为服务的每个实例创建一个单独的类,甚至通过继承实现少量代码.我只是想知道是否可以不用.

angular2-services angular

22
推荐指数
1
解决办法
2万
查看次数

创建具有依赖项的类的新实例,而不是了解工厂提供程序

我已经在这方面工作了一段时间,似乎无法找到足够明白的答案.我有一个TestComponent,它使用TestService从服务器获取一组TestModel.当我抓住这些测试模型时,它只是一个json文件,服务器正在读取并使用正确的mime类型发回.从服务器获取测试模型后,我将它们放在一个简单的select元素下拉列表中.选择测试模型后,它会在嵌套组件TestDetailComponent中显示所选的测试模型.

这一切都很好,并且工作正常.当我从服务器提取数据时,我一直遇到问题.由于JavaScript没有运行时检查,我们无法自动将JSON从服务器转换为typescript类,因此我需要使用已检索的JSON手动创建TestModel的新实例.

好的,这就是问题所在.我需要调用新的TestModel并为其提供依赖项,但它需要是TestModel的新实例.我希望TestModel能够将自身保存并更新回服务器,因此它依赖于来自@ angular/core的Http,并且它依赖于我使用opaqueToken,CONFIG.I进行角度注入的配置类.无法弄清楚如何获得TestModel的新实例.这是初始文件

TestComponent:

import { Component, OnInit } from '@angular/core';

import { TestService } from './shared/test.service';
import { TestModel } from './shared/test.model';
import { TestDetailComponent } from './test-detail.component';

@Component({
    selector: "test-component",
    templateUrl: 'app/test/test.component.html',
    styleUrls: [],
    providers: [TestService],
    directives: [TestDetailComponent]
})
export class TestComponent implements OnInit {

    tests: TestModel[] = [];
    selectedTest: TestModel;

    constructor(private testService: TestService) {};

    ngOnInit() {
        this.testService.getTestsModels().subscribe( (tests) => {
            console.log(tests);
            this.tests = tests 
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

TestComponent模板:

<select [(ngModel)]="selectedTest">
    <option *ngFor="let test of tests" [ngValue]="test">{{test.testing}}</option> …
Run Code Online (Sandbox Code Playgroud)

dependency-injection typescript angular

2
推荐指数
1
解决办法
1万
查看次数