angular组件版本管理器

准备2个版本的btnRef

export abstract class BtnRef {
  version: Version;
}

export class BtnV1 extends BtnRef {
  version = new Version('1.0.0');
}

export class BtnV2 extends BtnRef {
  version = new Version('1.0.1');
}

export const btnProvide: Provider[] = [{
  provide: BtnRef,
  useClass: BtnV1,
  multi: true
}, {
  provide: BtnRef,
  useClass: BtnV1,
  multi: true
}, {
  provide: BtnRef,
  useClass: BtnV2,
  multi: true
}];

-- 获取最新版本ref

export class BtnVersion {
  refArray: BtnRef[] = [];
  constructor(refs: BtnRef[]) {
    // 去除版本号一样的ref
    this.refArray = _.sortedUniqBy(_.flattenDeep(refs), (o) => o.version.full);
  }
  getLatest(): BtnRef {
    return _.maxBy(this.refArray, (o) => o.version.full);
  }
}

export const NEWBTNREF = new InjectionToken<BtnRef>('BTNREF');

export function btnVersionFactory(btnRef: BtnRef) {
  return new BtnVersion([btnRef]);
}

export const BTNREF_FACTORY: Provider[] = [
  {
    provide: BtnVersion,
    useFactory: btnVersionFactory,
    deps: [BtnRef]
  },
  {
    provide: NEWBTNREF,
    useFactory: (version: BtnVersion) => {
      return version.getLatest();
    },
    deps: [BtnVersion]
  }
];
  • 组件中使用
@Component({
  selector: 'app-btn',
  templateUrl: './btn.component.html',
  styleUrls: ['./btn.component.css']
})
export class BtnComponent implements OnInit {

  constructor(
    @Inject(NEWBTNREF) public btns: BtnRef
  ) { }

  ngOnInit() {
    console.log(this.btns);
  }

}
  • 去掉@Inject(NEWBTNREF)

export class BtnVersion {
  refArray: BtnRef[] = [];
  constructor(refs: BtnRef[]) {
    // 去除版本号一样的ref
    this.refArray = _.sortedUniqBy(_.flattenDeep(refs), (o) => o.version.full);
  }
  getLatest(): NewBtnRef {
    return _.maxBy(this.refArray, (o) => o.version.full);
  }
}

export abstract class NewBtnRef extends BtnRef { }

export function btnVersionFactory(btnRef: BtnRef) {
  return new BtnVersion([btnRef]);
}

export const BTNREF_FACTORY: Provider[] = [
  {
    provide: BtnVersion,
    useFactory: btnVersionFactory,
    deps: [BtnRef]
  },
  {
    provide: NewBtnRef,
    useFactory: (version: BtnVersion) => {
      return version.getLatest();
    },
    deps: [BtnVersion]
  }
];

@Component({
  selector: 'app-btn',
  templateUrl: './btn.component.html',
  styleUrls: ['./btn.component.css']
})
export class BtnComponent implements OnInit {
  constructor(
    public btns: NewBtnRef
  ) { }
  ngOnInit() {
    console.log(this.btns);
  }
}

  • 隔离
@Component({
  selector: 'app-btn',
  templateUrl: './btn.component.html',
  styleUrls: ['./btn.component.css'],
  providers: [
    BTNREF_FACTORY
  ]
})
export class BtnComponent implements OnInit {
  constructor(
    public btns: NewBtnRef
  ) { }
  ngOnInit() {
    console.log(this.btns);
  }
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,881评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,100评论 25 708
  • 中午休息时间临摹了一副阁阁老师的红樱桃,可是我的樱桃怎么一点都不红呢? 忘了拍过程图了
    zhaonannan阅读 262评论 2 0
  • 在《得到》上面看到锤子科技的罗永浩老师给他专栏订阅者写了一封信,内容的大概意思就是因为他自己的工作忙而导致...
    古刹青苔阅读 347评论 2 1
  • 佛的真意不是僧借佛法谋利享乐,但是苦行乞食离佛也只是近了一重,体现出了向佛意志,但是有力有命,何必乞食?我信仰孔孟...
    善行者大正阅读 248评论 0 0