提供商在angular中的功能

Question

我在项目中创建了一个组件和服务。根据文档，在使用该服务时，你应该将它包含在要注入它的组件的providers元数据中。然而，我注意到，如果我不在我的组件的元数据中提到它，它会工作得很好。我猜不出这事发生的原因。

我从StackOverflow对一个类似问题的回答中读到这个

如果你没有在你正在使用的组件中提供它，那么它将转到它的父组件，直到它被使用的模块，直到它找到实例。每个级别都有自己的提供商实例映射，组件将使用它在向上遍历注入树时找到的第一个实例。

我查看了我的整个应用程序，如果是这样的话，但是没有得到任何类似的东西。

组件模块:card.component.ts

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { BoxesService } from '../boxes.service';
import { Box } from '../box';
import { HeaderTitleService } from '../header-title.service';
//import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css'],
providers: []
})
export class CardComponent implements OnInit {
//@Input() boxes: Box[] = [];
public selectedBox: Box = { name : '', text : '', id:0};
public boxes: Box[] = [];
private header = "Total Cards displayed : " + this.boxes.length;
constructor(private boxData: BoxesService, private headerService: HeaderTitleService) { }
private getBoxes(): void {
this.boxes = this.boxData.getBoxes();
}
public ngOnInit(): void {
this.getBoxes();
this.header = "Total Cards displayed : " + this.boxes.length;
this.headerService.setTitle(this.header);
}
public onClick(box: Box) {
this.selectedBox = box;
}
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CardComponent } from './card/card.component';
import { HeaderComponent } from './header/header.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CardDetailComponent } from './card-detail/card-detail.component';
@NgModule({
declarations: [
AppComponent,
CardComponent,
HeaderComponent,
DashboardComponent,
CardDetailComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

服务类:boxes.service.ts

import { Injectable } from '@angular/core';
import { Box } from './box';
@Injectable({
providedIn: 'root'
})
export class BoxesService {
private boxes : Box[] = [
{ name: 'box1', text: 'test data for box 1', id: 1 },
{ name: 'box2', text: 'test data for box 2', id: 2 },
{ name: 'box3', text: 'test data for box 3', id: 3 },
{ name: 'box4', text: 'test data for box 4', id: 4 },
{ name: 'box5', text: 'test data for box 5', id: 5 },
{ name: 'box6', text: 'test data for box 6', id: 6 },
{ name: 'box7', text: 'test data for box 7', id: 7 },
{ name: 'box8', text: 'test data for box 8', id: 8 },
{ name: 'box9', text: 'test data for box 9', id: 9 },
{ name: 'box10', text: 'test data for box 10', id: 10 },
]
getBoxes(): Box[]{
return this.boxes;
}
constructor() { }
}

试图理解这个概念很困难，最后一天坚持了下来。

Answer 1

你所指的答案是非常古老的。这改变了很多。请通过这个链接

它在你的情况下工作的原因是providedIn: 'root'，这是在根级别注册你的服务

请通读本文档

https://angular.io/guide/providers

Answer 2

这很简单。如果你有providedIn: 'root'在服务内部，它将可用于整个Angular应用。

@Injectable({
providedIn: 'root'
})

如果你想在一个特定的组件中使用它，你需要将它添加到相应组件的providers数组中。ts文件。

希望这能回答你的问题。