Lessons & Mistakes of Angular2 time __angular2

"The lesson of time"--what is the lesson of time?

The lesson of time , that is, whether this thing is difficult or easy, originally in a certain period of time, or even less than this certain time can be completed, and you have to use twice times or even three times times to complete, what is not finished at all, but finally resolved, you find, Just because you think a little less, only need to think a little bit more, even if you look a little more forward, you can solve the small function, or a group of pieces, or a piece of code.

It does not matter to make these mistakes, it is important that you write down these mistakes, these are the lessons of time , remember.

Below start, the time lesson record, if the same mistake I made is not the first time, then I will also record, I want to see if I will fall in the same place n times. Grand background

I'm just going to write a simple component sino-loading-hint, this component, from the external receiving parameter state:number,1: loading; 2: Data acquisition success, normal display; 3: Failed to load. Another parameter Loadingtitle if the parameter is not passed in, the default value is used, and if the argument is passed in, the passed-in parameter is used.

So a simple component, and just to achieve the first step, to show the "Loading ..." words.

code that went wrong

The most external use place:

<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>

Real Sino-loading-hint The place to use:

<sino-loading-hint [state]=] state "loadingtitle=" Loading ... ">
  
 
The error is that no matter how I pass the arguments, the values of loadingtitle and state do not change at all, and I also interrupt the debugging, the value is passed over, but it is not shown, in this place wasted a whole night of time. Lesson

In fact this place, I can have two ways to quickly locate the problem. The first is, I go up and look up, where the sino-list component is used, to find out where it is used, and this is how it works.
2. The second way is to use Angury this debugging, to look at the component tree, so you can quickly find the problem.



when all the tools are available, make sure you use the tools well.  di relies on injection for service of the DI system without relying on the service dependency injection for DI systems 

When Basedataservice unit tests, you should create your service (new), because my basedataservice is not dependent on the angular di system to generate it.
Service = new Basedataservice (config, HTTP);

When the sino-list is used as a Sino-base-data-servie subassembly, the service in the parent component is acquired, so the unit test becomes much better after this is written. Dependency Injection method for service dependent on di system

It is through the encapsulation of the module, inject basedataservice into the angular di system, so that all the components in the module can get through the angular di injection way to basedataservice, so it is very convenient.

@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 the Moduleconfig and HTTP required in the constructor are providers to the module when the module is initialized, so you can use the Angular di system for dependency injection. Therefore, you can use the dependency injection in any subassembly in the module.

@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,//injected in
          usevalue:config,
        }
      ]
    };
  }
}
 
di Injection Error Example 
e.g.-Service did not write @injectable () 
The error with this example is that the class provider is registered at the module level, which is providers:[workflowservice], but the following error has been reported:


The reason for this error is that the following code is missing from the red box.

when e.g.-Di, there was no dependency injection from the place where it was used .

This leads to a method that is not used in the innermost base class to invoke. Here is the error:


This error has always been said to have no add to this method. That is to say, sinobuttonscomponent is not being injected in.

Here is code:



Knowledge point 1


In position 1, the creation of several CRUD modules Basedataservice will be created several times and placed in the Forroot method, if the Forroot method is not invoked when creating a small crud die in the dispatch module. Then you will not create basedataservice again.

Not to be continued ...

It 's written in the back .

GitHub the strength of all of you have a front-end interview problem project, which are all the interview when you encounter problems and some learning materials, interested in words can be concerned about. If you are interested in joining us, please leave a message in the project. Items can also be viewed on the gitbook.

Interviewlibrary-github
Interviewlibrary-gitbook