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

Question

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

服务a

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();
  }


}

但是我无法解决它，并且出现了这样的错误