首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular2 之 时间的教训 & 错误

Angular2 之 时间的教训 & 错误

作者头像
贺贺V5
发布2018-08-21 12:12:14
8500
发布2018-08-21 12:12:14
举报

"时间的教训" - 何为时间的教训呢?

所谓时间的教训,那就是,不论这个东西难或者易,本来在一定的时间内,甚至小于这个一定的时间就可以完成的,而你偏偏用了2倍甚至三倍的时间来完成,更有甚者根本完不成的东西,但是最后解决了之后,你却发现,只是因为你少想了一点,只需要再多想一点点,哪怕多往前看一点点,你就能解决了的小功能,或者小组件,或者一段代码。

犯这些错误不要紧,要紧的是自己要将这些错误记录下来,这些都是时间的教训,要记住。

下面开始,时间的教训的记录,如果同样的错误我犯过不是第一次,那么我也会记录下来,我到时要看看,自己是不是会在同一个地方摔倒N次?

大意失荆州

背景:

我只是要写一个简单的组件sino-loading-hint,这个组件,从外部接收参数state:number,1:加载中;2:数据获取成功,正常展示;3:加载失败。另外一个参数loadingTitle如果没有传入参数的则使用默认值,如果传入参数的话,则使用传入的参数。

就这么一个简单的组件,而且只是实现第一步,展示“loading...”字样。

出错的代码

最外侧的使用地方:

<div style="border-bottom: 0.55px solid #c8c7cc;">
  <sino-loading-hint>
    <sino-data-service [name]="config.name"
      [baseUrl]="config.baseUrl"
      [idPropertyName]="config.idPropertyName"
      [subflagPropertyName]="config.subflagPropertyName">
        <!--<sino-list type="todos"></sino-list>
        <sino-list type="drafts"></sino-list>-->
        <sino-list type="related" (onVoted)="onVoted($event)"></sino-list>
    </sino-data-service>
  <sino-loading-hint>
</div>

真正sino-loading-hint该使用的地方:

<sino-loading-hint [state]="state" loadingTitle="loading...">
  <h2>{{title}}</h2>
  <div *ngFor="let item of datas; let i = index" (click)="toDetail(item, i)">
    <h3>{{item.title}}</h3>
    <p>
      来自:{{item.ngDepartmentName}}的发文申请<br/>
      <span>发送时间:{{item.signDate}}</span>
    </p>
  </div>
</sino-loading-hint>

出现的错误是,无论我如何传递参数,loadingTitlestate的值根本没有改变,而且我也打断点调试了,值是传递过来了,可是就是不显示,在这个地方白白浪费了一晚上的时间。

教训

其实这个地方,我可以有两种方式可以很快的定位到问题的所在。

  1. 第一种方式就是,我去往上看,具体哪里使用的sino-list这个组件,去找到根本的使用它的地方,这个错误也是这样解决的。

2.第二种方式就是,使用Angury这个调试,去查看其中的component树,这样就能很快的查找问题。

展示图

component树

所有有工具可以使用的时候,一定要好好的利用工具!!

DI

  • 不依赖DI系统的service的依赖注入方式
  • 依赖DI系统的service的依赖注入方式

不依赖DI系统的service的依赖注入方式

BaseDataService单元测试的时候,应该是自己将service创建(new)出来,因为我的BaseDataService 不是依赖angular的DI系统来生成的。 service = new BaseDataService(config, http);

当将sino-list作为sino-base-data-servie的子组件后,就能获取到父组件中的service,所以这样写之后,单元测试就变得好些的多了。

依赖DI系统的service的依赖注入方式

就是通过模块的封装,将BaseDataService注入到了angular的DI系统中,这样在模块中的所有组件,都可以通难过angular的DI注入的方式获取到BaseDataService了,这样就非常的方便了。

@Injectable()
export class BaseDataService {
  remoteService: BaseDataRemoteService;

  constructor(private config: ModuleConfig, private http: Http) {
    this.config.baseUrl = config.baseUrl || config.name;
    this.remoteService = new BaseDataRemoteService(this.config.baseUrl, this.config.idPropertyName, this.http);
  }

BaseDataService在构造函数中所需要的ModuleConfig和Http都在模块初始化的时候就providers到了模块中,所以可以使用angular的DI系统来进行依赖注入,所以可以在模块中的任何子组件中进行依赖注入,随意使用。

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
  ],
  declarations: [
    SinoListComponent,
    SinoItemDetailComponent,
    SinoLoadingHintComponent,
  ],
  entryComponents: [
    SinoItemDetailComponent,
  ],
  exports: [SinoListComponent, SinoItemDetailComponent],
  providers: [
    BaseDataService,
  ],
})

export class CrudModule {
  static forRoot(config: any, routeConfig?: any): ModuleWithProviders {
    return {
      ngModule: CrudModule,
      providers: [
        {
          provide: ModuleConfig, // 注入了进来
          useValue: config,
        }
      ]
    };
  }
}

DI注入错误例子

e.g. - service没有写@injectable()

这个例子的错误是,在模块级别注册了类提供商也就是providers:[WorkflowService],但是一直报?这个错误:

bug-workflow.png

造成这个错误的原因就是?因为缺少红框框起来的code!

bug-workflow2.png

e.g. - DI的时候,没有从根本使用的地方进行依赖注入

这就导致了,在最里面的基类调用不到使用的方法。?是错误:

bug1.PNG

这个错误一直说的是没有add这个方法。也就是说sinoButtonsComponent没有被依赖注入进来。

?是code:

code1.png

code2.png

code3.png

知识点1

DI

放在位置1的话,创建几个crud模块BaseDataService就会创建几次,而放在forRoot方法中,如果在发文模块中在创建一个小的crud模快的时候是不会调用forRoot方法的,那么也就不会再次创建BaseDataService。

未完待续...

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.12.08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 大意失荆州
    • 背景:
      • 教训
      • DI
        • 不依赖DI系统的service的依赖注入方式
          • 依赖DI系统的service的依赖注入方式
            • DI注入错误例子
              • e.g. - service没有写@injectable()
              • e.g. - DI的时候,没有从根本使用的地方进行依赖注入
            • 知识点1
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档