angular - 如何在Angular4中解决运行时的依赖关系

Question

我开始学习angular4中的依赖注入。假设我有两个这样的服务

服务一个

export class BigService {

  constructor() { }


  print(){
    alert('big service');
  }
}

服务b

 export class SmallService {

      constructor() { }


      print(){
        alert('small service');
      }
    }

现在，我想在运行时解决依赖关系，假设我想在浏览器窗口大小 < 1000px 时调用小服务，当浏览器窗口大小> 1000px 时调用大服务

这是我的组件，我试图解决对单击按钮的依赖

@Component({
  selector: 'app-parent-b',
  templateUrl: './parent-b.component.html',
 styles:[`
 <input type="button" value="submit" (click)='userButtonClick()'>
 `]
})
export class ParentBComponent implements OnInit {
  ngOnInit() {
  }


  userButtonClick(){
  this.useInjector();
  }


  useInjector(){
    const truthy=true;
    let injector=ReflectiveInjector.resolveAndCreate([
      {
        provide:'service',
        useFactory:()=>{
          if(truthy){
            return new SmallService();
          }else{
            return new BigService();
          }
        }
      }
      ])

      let _s=injector.get('service')
      _s.print();
  }


}

但我无法解决它，我收到这样的错误

标签： angulardependency-injection