- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我目前正在学习新的 Angular 框架,我正在尝试制作一个动态搜索栏,它接受一个服务名称作为参数,以便它动态解析一个服务来查询后端服务。
为此,我使用了一个 Injector
,并在 ngOnInit
期间加载服务。这在使用基于字符串的提供程序时工作正常,但是我的 IDE 指出它已被弃用,我应该使用一个我似乎无法理解的 InjectionToken
。
我希望下面的代码能够工作,因为删除了 InjectionToken
的所有实例并用直接字符串文字替换它们:
我试着查看以下文档,但我不太理解它,因为我觉得我完全按照它说的做了,但它一直告诉我它不起作用:https://angular.io/guide/dependency-injection-providers
谁能告诉我我做错了什么?
谢谢
模块声明
// app.module.ts
@NgModule({
declarations: [
AppComponent,
SearchBarComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule
],
providers: [
{
provide: new InjectionToken<ISearchable>('CustomerService'), // <-- doesn't work; 'CustomerService' <-- works
useValue: CustomerService
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
搜索栏组件:
// search-bar.component.ts
@Component({
selector: 'search-bar',
templateUrl: './search-bar.component.html',
styleUrls: ['./search-bar.component.sass']
})
export class SearchBarComponent implements OnInit {
@Input()
source: string;
private searcher: ISearchable;
constructor(private injector: Injector) {}
ngOnInit() {
// error: Error: No provider for InjectionToken CustomerService!
let token = new InjectionToken<ISearchable>(this.source);
this.searcher = this.injector.get<ISearchable>(token);
// this works, but it's deprecated and will probably break in the future
// this.searcher = this.injector.get(this.source);
console.log(this.searcher);
}
}
使用搜索栏:
<!-- app.component.html -->
<div class="row justify-content-center mb-2">
<div class="col-8">
<search-bar title="Customers" source="CustomerService"></search-bar>
</div>
</div>
编辑:这是一个错误的例子:
最佳答案
在官方angular仓库上询问后,原来是一个简单的解决方案。您无需将服务名称作为字符串传递,而是通过组件将标记传递到另一个组件的 View 中。
我在服务本身的同时进行了此操作,以使其更易于跟踪。
@Injectable()
export class CustomerService implements ISearchable { ... }
export const CUSTOMER_SERVICE = new InjectionToken<ISearchable>('CustomerService');
import {CUSTOMER_SERVICE, CustomerService} from "./services/customer/customer.service";
@NgModule({
declarations: [ ... ],
imports: [ ... ],
providers: [
{
provide: CUSTOMER_SERVICE, // That's the token we defined previously
useClass: CustomerService, // That's the actual service itself
}
],
bootstrap: [ ... ],
})
export class AppModule { }
// In your component
import {CUSTOMER_SERVICE} from "./services/customer/customer.service";
@Component({
selector: 'app-root',
template: '<app-search-bar [source]="searcher"></app-search-bar>'
})
export class AppComponent
{
searcher = CUSTOMER_SERVICE;
}
@Component({
selector: 'app-search-bar',
templateUrl: './search-bar.component.html',
styleUrls: ['./search-bar.component.sass'],
})
export class SearchBarComponent implements OnInit
{
@Input()
source: InjectionToken<ISearchable>;
private searcher: ISearchable;
constructor(private injector: Injector) {}
ngOnInit()
{
this.searcher = this.injector.get<ISearchable>(this.source);
}
search(query: string)
{
this.searcher.search(query).subscribe(...);
}
}
关于 Angular InjectionToken 抛出 'No provider for InjectionToken',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53317225/
正在复制的问题是,当sew呈现登录页面时,然后我们继续执行身份验证,现在将我们重定向到网站的仪表板,此时我们继续关闭会话,并且在之前的交互中生成的这些cookie没有被删除。这个问题是重复性的,并且一
我是 Flutter 的新手,目前正在研究 DI。 我正在使用 flutter_bloc 和 provider 包。 flutter_bloc 附带一个 RepositoryProvider,我现在问
我是 Flutter 的新手,目前正在研究 DI。 我正在使用 flutter_bloc 和 provider 包。 flutter_bloc 附带一个 RepositoryProvider,我现在问
我正在使用 Angular2 开发一个应用程序。 我正在尝试在我的应用程序中使用 Reactive Forms,但我遇到了一些错误: 第一个错误是关于 NgControl 的,如下所示: No pro
最近很多用户在使用电脑的时候发现了wmi provider host进程占用内存比较大,不知道这个进程到底是干什么的,能不能禁止,怎么禁止。下面来一起看看想想的介绍吧。 wmi provide
我的问题是: 当我在设计时不知道这些表达式的数量和类型时,如何将列表中的表达式拼接成一个引用? 在底部,我包含了类型提供程序的完整代码。 (我已经剥离了这个概念来证明这个问题。)我的问题出现在这些行:
我目前正在学习使用 Flutter 进行应用程序开发,并已开始学习 Provider 包。我遇到了一些困难并收到错误: “在此...小部件之上找不到正确的提供者” 我最终移动了 Provider 小部
我是 android 的新手,我正在学习如何使用 JavaMail API 发送电子邮件的教程,我已经正确添加了必要的 Jar,但我总是遇到无法解析 GmailSender 类上的符号提供程序,我尝试
我正在我的 Angular 应用程序中进行单元测试,我正在使用 TestBed 方法, 我正在测试组件,所以每个规范文件看起来像这样 import... describe('AppComponent'
enter image description here 代码:这是我的 index.js 文件 index.js import { Provider } from "react-redux"
Microsoft ASP.NET Universal Providers 1.1昨天与System.Web.Providers 1.2一起发布.在后面的 nuget 页面上声明:Legacy pac
在我的 Next js 项目中,我使用了 Next auth,其中 import {Provider} from 'next-auth/client' , 并包裹 在 _app.js 中。 但是,与此
当我在 View 模型中使用如下界面时 class MainViewModel @ViewModelInject constructor( private val trafficImagesR
更新 - 我实际上发现它是 Flutter Issue . 我有两个 Provider,一个是 EntriesProvider,另一个是 EntryProvider。我在创建条目时使用我的 Entry
function configure($provide, $injector) { $provide.provider("testservice", function () {
这真让我抓狂。我似乎无法弄清楚这有什么问题。 代码: public interface IMinutesCounter { void startTimer(); void stopTi
我在我的项目中玩 Dagger 2,然后我陷入了这个错误编译。-> Error:(18, 21) error: ....MyManager cannot be provided without an
我有一个 Resteasy 应用程序,它使用 Spring 并包含 ContainerRequestFilter 和 ContainerResponseFilter 实现,并用 @Provider 注
我正在尝试使用 Dagger2 设置一个新项目,我以前使用过 Dagger2,但现在我正在尝试自己从头开始设置它。我正在从我参与的 Kotlin 项目中获取示例,但无法像现在在 Kotlin 中一样为
我刚开始学习 dagger2,遇到了一个奇怪的问题,在我看来像是一个错误。这是模块: @Module public class SimpleModule { @Provides Coo
我是一名优秀的程序员,十分优秀!