Javascript 提供程序在angular中的功能

我在项目中创建了一个组件和服务。根据使用该服务时的文档，您应该将其包含在要注入该服务的组件的提供者元数据中。但是，我注意到，如果我在组件的元数据中不提及它，它就可以正常工作。我无法判断它发生的原因

我是从一本书上读到的

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

如果是这样的话，我查看了我的整个应用程序，但没有得到这样的结果

组件模块：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 { }

服务类别：box.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() { }
}

---

很难理解这个概念，坚持了一天。

很简单。如果您在服务中的“根”中提供了

，则它将可用于整个角度应用程序

@Injectable({
  providedIn: 'root'
})

如果希望在特定组件中使用它，则需要将其添加到相应component.ts文件中的providers数组中

希望这能回答您的问题。
您所指的答案非常古老。这改变了很多。请通过这个链接

它在您的案例中工作的原因是：'root'

中提供的这是在根级别注册您的服务

请仔细阅读这份文件

---

非常感谢：）