Ionic part

The life cycle

Ionic has a life cycle of its own and is not used with Angular.

routing

Ionic has its own routing mechanism. Angular routing is not available.

Ionic color customization

  • Pothole: Some ionic components have color properties. Changing the color of the component only requires changing its color value.
  • Solution: variable. SCSS can customize the colors at $colors in the theme directory.

Page component ion-content

  • Pit: pages have drop-down damping by default, we don’t want pages to be able to be pulled down
  • Solution: Add no-bounce to ion-content tag

Drop down refresh component ion-refresher

  • Pit: Drop down when ready for animation to disappear
  • Solution: Add the ionPull event to the ion-Refresher component.
  • Pit: The Refresher component is triggered when the horizontal scroll component is used.
  • Fix: Add press and leave events to the horizontal scroll component, change the value of a Boolean value and bind the value to the ion-refresher Enabled property.
  • <ion-refresher [enabled] ='refresherB && showLoading$ | async' pullMin='60' pullMax='300' (ionPull) ='doRefress()'
 (ionRefresh) ="doRefresh($event)"></ion-refresher>   

Copy the code

navCtrl.push

  • Pit: NavCtrl. push to a new page after the bottom tabs need to disappear
  • Solution:
  •  // Add to the hook before page construction
let elements = document.querySelectorAll(".tabbar");
if(elements ! =null) {
     Object.keys(elements).map((key) = > {
         elements[key].style.display = 'none';
     });
 }
 // Add to the page destruction hook
 let elements = document.querySelectorAll(".tabbar");
 if(elements ! =null) {
   Object.keys(elements).map((key) = > {
     elements[key].style.display = 'flex';
   });
 }
Copy the code

Ion – tabs component

  • Pit: Ion-tab cannot customize ICONS in the normal way
  • Solution: Run the sASS command to iterate over the icon name to be replaced

Presents some

There is no communication between associated components

  • Pit: How can uncorrelated components communicate more elegantly
  • Solution: Register a global service, create an observable, and subscribe to it in the required component.
  •   public eventBus:Subject<string> = new Subject<string> ();Copy the code

Animations module

  • Trap: Safari does not support Animations used by Angular by default
  • Solution: NPM I web-animations-js is introduced later in the Polyfills file
  • Pit: Assign values to defined variables after data is fetched from the server, and all associated DOM animations are triggered
  • Solution: After fetching data, do not do assignment operation, add and delete operation on the original variable.

NgRx with dirty check

  • Pit: When the page logic is complex, the lifecycle is not sufficient to manage the state.
  • Solution: Use ngRx for elegant state management, because ngRx manages state based on flow and angualr’s lifecycle based on dirty checks, two different logic, so it should be decided at the beginning of the project.
  • Pit: Component state mess after using ngRx
  • Solution: Disable angualr dirty check when using ngRx
  • @Component({
  changeDetection:ChangeDetectionStrategy.OnPush
});
Copy the code
  • Pit: When angular dirty check is turned off and needs to be used to check for updates to components
  • Solution: The ChangeDetectorRef component introduced in angualr calls its detectChanges() method after the component constructor declaration to trigger a refresh.

HttpClientModule

  • Pits: the json
  • Solution: HttpClient since Angular4.3 is very unfriendly to JSONP. It has no functionality other than making requests, no way to set query parameters (you can use a string to solve the problem), and uses get or POST to negotiate with the background.
  • Pit: Query the set method of the parameter HttpParams
  • Solution: Every time the set() method is called, an HttpParams object containing the new value is returned, so the parameters will not be set correctly if you use the following method.
  • // Cannot be set correctly. This is how HTTP modules were written before Angualr4.3
const params = new HttpParams();
params.set('orderBy'.'"$key"');
params.set('limitToFirst'."1");
// Alternatives
const params = new HttpParams();
params = params.append('orderBy'."$key");
params = params.append('limitToFirst'."1");
Copy the code
  • Pit: post requests query parameter Settings
  • Params.tostring (); params.tostring (); params.tostring ();