Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2+ Component extends Component fine, but tslint complaining on inherited lifecycle hooks

Tags:

angular

tslint

I have an abstract Base Component that cleans subscriptions with oneself:

import { OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

export abstract class NeatComponent implements OnDestroy, OnInit {
// Add '.takeUntil(this.ngUnsubscribe)' before every '.subscrybe(...)'
// and this subscriptions will be cleaned up on component destroy.

  protected ngUnsubscribe: Subject<any> = new Subject();

  public ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  public ngOnInit(){}
}

Now I creating working component:

export class CategorySelectorComponent extends NeatComponent {

    public constructor() { super(); }
    
    public ngOnInit() {
      // some code
    }
}

All works fine, but tsLint not likes my ngOnInit method:

[tslint] Implement lifecycle hook interface OnInit for method ngOnInit in class CategorySelectorComponent (use-life-cycle-interface)

like image 807
Anton Pegov Avatar asked Feb 07 '18 13:02

Anton Pegov


People also ask

What is lifecycle hooks in Angular 2?

Angular 2 — Component Lifecycle Hooks. Each Angular application goes through a lifecycle. In fact, Angular 2 is built on three components, so each component goes through its own lifecycle as well.

What is a component lifecycle in angular?

A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed.

How many components are there in Angular 2?

In fact, Angular 2 is built on three components, so each component goes through its own lifecycle as well. This is quite advanced stuff and I go through this it a high level here, so any questions please ask!

What are aftercontent hooks in angular?

The AfterContent hooks concern ContentChildren, the child components that Angular projected into the component. The following AfterContent hooks take action based on changing values in a content child , which can only be reached by querying for them using the property decorated with @ContentChild.


2 Answers

I think you can override this by making

From :

"use-life-cycle-interface": true,

to :

"use-life-cycle-interface": false,

For more detail of test cases , Check this out

like image 83
Vivek Doshi Avatar answered Oct 20 '22 10:10

Vivek Doshi


I had the same error with a component without heritage, and I correct it adding implement OnDestroy.

like image 41
Ben Grandin Avatar answered Oct 20 '22 11:10

Ben Grandin