角度的提供者功能

问题描述

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

我从一个 similar question

上的 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() { }
}

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

解决方法

其实很简单。如果您在服务中有 providedIn: 'root'，它将可用于整个 Angular 应用程序。

@Injectable({
  providedIn: 'root'
})

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

希望这能解答您的疑问。

,

您所指的答案很旧。这改变了很多。请通过此链接

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

请仔细阅读此文档

https://angular.io/guide/providers