1, commonly used decorators

  • Component components
  • Directive instruction
  • Pipe line
  • NgModule module
  • Input Parent to child input
  • Output from child to parent

2. Life cycle

  • NgOnChanges responds when setting or resetting the input properties of a data binding. This method takes the SimpleChanges object of the current and previous property values. Note that this happens very frequently, so anything you do here will have a significant impact on performance
  • NgOnInit initializes the directive/component after it first displays the data binding and sets the input properties of the directive/component
  • NgDoCheck detects and reacts to changes that Angular is unable or unwilling to detect itself
  • NgAfterContentInit is called after the external content is projected into the view where the component view or directive resides
  • NgAfterContentChecked is called after checking what has been projected into a component or directive
  • Called after ngAfterViewInit initializes the component view and its child views or the view containing the directive
  • Called after ngAfterViewChecked has done change detection for component views and child views or views containing the directive
  • NgOnDestroy is called and cleaned every time Angular destroys a directive/component. Here, unsubscribe observables and detach event handlers to prevent memory leaks

3. The order in which lifecycle hooks are called when a component is initialized

ngOnChanges => ngOnInit => ngDoCheck => ngAfterContentInit => ngAfterContentChecked => ngAfterViewInit =>ngAfterViewChecked

4. The sequence of lifecycle hook calls when parent and child components are initialized

parent-ngOnChanges parent-ngOnInit parent-ngDoCheck parent-ngAfterContent parent-ngAfterContentked child-ngChanges child-ngOnInit child-ngDoCheck child-ngAfterContentInit child-ngAfterContentChecked child-ngAfterViewInit Child-ngafterviewchecked parent-ngAfterViewinit parent-ngAfterViewChecked When checked again parent-ngDoCheck parent-ngAfterContentked child-ngDoCheck child-ngAfterContentChecked child-ngAfterViewChecked parent-ngAfterViewChecked

Correspondence between father and son

  • Decorator input output
  • service

6. When will change detection be removed under onPush

  • When the input value changes, if the reference value address changes
  • The created event function is called like click

Child component change detection triggers parent component change detection

7. What are the benefits of RXJS versus Promises

  • Observables are declarative and do not begin execution until they are subscribed to. Commitments are executed immediately at creation time. This allows observables to be used to define what should be executed on demand
  • Observables can provide multiple values. Promise to provide only one. This allows observables to be used to get multiple values over time
  • Observables distinguish between concatenation and subscription statements. The promise is only a.then() statement. This allows observables to be used to create complex content that the rest of the system can use without wanting to execute immediately
  • The observable’s SUBSCRIBE () handles errors. A promise pushes errors to its child promises. This allows observables to be used for centralized, predictable error handling

8. The differences between RXJS Subject, ReplaySubject, BehaviorSubject, and AsyncSubject

  • If the Subject publishes and then subscribes, the subscription does not get a value
  • In the ReplaySubject publish and then subscribe case, the subscription gets a value, depending on the parameter
  • If the BehaviorSubject advertises and then subscrires, the BehaviorSubject takes the latest release value and sets the initial release
  • AsyncSubject ends the subscription in case of taking the latest data

ReplaySubject, BehaviorSubject, and AsyncSubject all inherit from Subject and are all variants of Subject

If there are any mistakes in this article, please correct them in the comments section. If this article has helped you, please like it and follow it

To be continued…