Почему конструктор вызывается повторно?

Question

[zlodiak]

Есть два компонента. Один наследуется от другого. Пример тут.

Как видите, конструктор каждого выводит в консоль фразу. Объясните пожалуйста почему конструктор компонента HelloComponent отрабатывает два раза? Это видно из сообщения в консоли

Это нормальный ход событий, этого можно и нужно избегать?

Answer 1

[Дмитрий Лузанов]

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent extends HelloComponent { // Вот тут
  name = 'Angular 6';

  constructor() {
    super(); // Первый console.log('...')
    console.log('constructor app');
  }
}

Вы AppComponent унаследовали от HelloComponent. Вызвали super(). Потом еще раз запихнули HelloComponent в шаблон:

<hello name="{{ name }}"></hello> // Второй console.log('...')
<p>
  Start editing to see some magic happen :)
</p>