gpt4 book ai didi

javascript - Angular 继承注入(inject)不同的实例

转载 作者:行者123 更新时间:2023-12-03 01:11:57 27 4
gpt4 key购买 nike

我有 2 个彼此相同的组件。唯一的区别是它们的名称和一些 html header 。因此我想使用继承。

我创建了一个抽象服务:

export abstract class AbstractFilmListService {

protected readonly API = WebUtils.RESOURCE_HOST_API + 'film/';


constructor(protected client: HttpClient) {
}

deleteFilm(filmId: number) {
return this.client.delete(this.API + filmId);
}

fetchFilms(): Observable<Film[]> {
return this.client.get(this.API) as Observable<Film[]>;
}
}

子类 1:

@Injectable({
providedIn: 'root'
})
export class FilmListService extends AbstractFilmListService {
constructor(protected client: HttpClient) {
super(client);
}
}

子类2:

@Injectable({
providedIn: 'root'
})
export class SeriesListService extends AbstractFilmListService{

protected readonly API: string;

constructor(client: HttpClient) {
super(client);
this.API = WebUtils.SERIES_API;
}
}

到目前为止一切都还好。但我想用组件做同样的事情:

电影列表组件:

@Component({
selector: 'app-film-list',
templateUrl: './film-list.component.html',
styleUrls: ['./film-list.component.css']
})
export class FilmListComponent implements OnInit {

constructor(protected client: HttpClient,
protected router: Router,
protected snackService: SnackService,
protected filmListService: FilmListService // <- Problem is here !
) {
}
//....

}

系列列表组件:

 @Component({
selector: 'app-series-list',
templateUrl: './series-list.component.html',
styleUrls: ['./series-list.component.css']
})
export class SeriesListComponent extends FilmListComponent implements OnInit {

constructor(protected client: HttpClient,
protected router: Router,
protected snackService: SnackService,
protected filmListService: FilmListService // <- Problem is here!
) {
super(client, router, snackService, filmListService);
}

ngOnInit() {
}

}

我想FilmListComponent声明AbstractFilmListService而不是FilmListService,当它开始注入(inject)服务时,它应该注入(inject)FilmListService >.

同样的方式,SeriesListComponent应该声明AbstractFilmListService而不是FilmListService,当它开始注入(inject)服务时,它应该注入(inject)SeriesListService >.

我的意思是这样的:

export class FilmListComponent implements OnInit {

constructor(
// ...
protected filmListService: AbstractFilmListService
) {
this.filmListService = new FilmListService(); // Angular should do something like this...
}
//....

}

SeriesListComponent 也是如此:

export class SeriesListComponent implements OnInit {

constructor(
// ...
protected filmListService: AbstractFilmListService
) {
this.filmListService = new SeriesListService(); // Angular should do something like this...
}
//....

}

我知道 Angular 不会为每个组件创建新的服务,它使用单例设计模式进行依赖注入(inject)。为了让自己清楚,我写了

"new SeriesListService(), new FilmListService()"

如何为不同的组件注入(inject)不同的实例,即使它们的类型在构造函数中声明相同?

<小时/>

更新

应用程序模块:

@NgModule({
declarations: [
AppComponent,
LoginComponent,
HeaderComponent,
HomeComponent,
UserManagementComponent,
ActorComponent,
FilmComponent,
SeriesComponent,
ProductComponent,
SafeUrlPipe,
FilmListComponent,
HeroComponent,
CoverComponent,
SeasonComponent,
ChapterComponent,
SeriesListComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RoutingModule,
TokenModule,
MaterialModule,
NgbTimepickerModule,
HttpInterceptorModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {
}

最佳答案

如果它不是一个单例服务,那么在我看来使用 providedIn 就没有多大意义。

但是要回答您的问题,如果您想要此服务的不同实例,您应该在 @Component 注释中提供该服务:

@Component({
selector: 'app-series-list',
templateUrl: './series-list.component.html',
styleUrls: ['./series-list.component.css'],
providers: [AbstractFilmListService] // <-- will create a new instance for this component
})

关于javascript - Angular 继承注入(inject)不同的实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52180727/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com