【Angular】09依赖注入

​​providedIn: 'root'​​ 指定 Angular 应该在根注入器中提供该服务,从而实现根注入器将服务注入，它就在整个应用程序中可用

providedIn：
​

• root ：注入到AppModule，提供该服务，所有子组件都可以使用（推荐）
• null ： 不设定服务作用域（不推荐）
• 组件名：只作用于该组件（懒加载模式）

//导入Injectable装饰器
import { Injectable } from '@angular/core';
//使用Injectable装饰器声明服务
@Injectable({
  //作用域设定，'root'表示默认注入，注入到AppModule里
  providedIn: 'root'
})
export class ListService {

  constructor() { }
  
  list:Array<string>=['Angular','React','Vue']

  getList(){
    return this.list
  }

  addList(str:string){
    this.list.push(str)
  }
}


import { ListService } from '../serves/list.service';

constructor(private listService:ListService) { }

list:Array<string> | undefined
ngOnInit(): void {
  console.log('sthome-ngOnInit')
  this.list = this.listService.getList()
}

// 渲染结构
<!-- 服务 -->
<p *ngFor="let item of list">{{item}}</p>

也可以使用 ​​@Component​​​ 或 ​​@Directive​​​ 内部的 ​​providers: []​​，为特定的组件子树提供服务，这也将导致创建多个服务实例(每个组件使用一个服务实例)

......
import { ListService } from '../serves/list.service';
@Component({
  selector: 'app-sthome',
  templateUrl: './sthome.component.html',
  styleUrls: ['./sthome.component.less'],
  providers: [ListService]
})
......