typescript - Angular-komponentärv. Hur föräldrars livscykelhakar kan köras?

Så jag har BaseComponent och många barn som utökar det:

export class Child1Component extends BaseComponent implements OnInit, AfterViewInit

Child1Component anropar inte super.ngAfterViewInit(), men av någon anledning körs BaseComponent AfterViewInit ändå. Jag loggar det bara i konsolen:

ngAfterViewInit() {
  console.log('BaseComponent AfterViewInit')
}

Hur är det möjligt? Vad mer än super.ngAfterViewInit() kan anropa förälderns livscykelhake?

Kunde detta bara hända i utvecklingsläge?

Svar #1

Jag tror att det är normalt beteende för OOP-arv. Om du inte uttryckligen definierar ngAfterViewInit i barnkomponenten, kommer denna komponent att ha förälderns implementation av den metoden tillgänglig.

Så, under komponenternas livscykel, när Angular kontrollerar om ngAfterViewInit-metoden är tillgänglig på barnkomponenten, är svaret ja: barnkomponenten har den metoden implementerad, men den är ärvd från föräldrakomponenten

Svar #2

barnkomponenten kommer att ha (inneboende) alla egenskaper och metoder från baskomponentklassen så normalt kommer barnklassen att ha ngAfterViewInit-metoden och denna kommer att köras av Angular. Om du vill skriva över denna metod, återskapa den helt enkelt i barnklassen så kommer den att ha företräde framför metoden i basklassen, men du kan fortfarande komma åt basklassen genom att använda 💪 super-nyckelordet

export class Child1Component extends BaseComponent implements OnInit, AfterViewInit {

  ngAfterViewInit() {
    super.ngAfterViewInit(); // 👈 call base ngAfterViewInit method  
    console.log('Child1Component AfterViewInit');
  }

}

ngAfterViewInit är en speciell metod, det är en av livscykelhakarna, en metod som körs och hanteras av Angular, läs mer om detta 👉 här

Relaterade artiklar