Угловые компоненты Intitiate больше раз

Question

Я использую Angular 6 и не могу создать компоненты более одного раза, я пытался увидеть похожий вопрос о переполнении стека, но я не нашел ответа

здесь html-div-component.html

<div [style.opacity]="opacity" class='div-component' [style.margin- top.px]="marginTop">    

и html-div.component.ts

@Component({
   selector: 'app-html-div',
   templateUrl: './html-div.component.html',
   styleUrls: ['./html-div.component.css']
})     
export class HtmlDivComponent implements OnInit {

  @Input() name;

  @ViewChildren('div-component') elements: QueryList<HtmlDivComponent>;

  ...

  constructor() { }

  ngOnInit() {
    console.log('initializing');
    window.addEventListener('scroll', this.scrollHandler, true);
    window.onload = (event) => {
    ...
  };

 }
 ...
}

Здесьродительский компонент .html

<app-html-div id="get-started-div" name="blue">
<div class="charat-list default-panel mui-panel">
  <h2 class="forstyle-h2">/h2>
  <p>
    <input type="button" value="1">
  </p>
  <p>
    <input type="button" value="2">
  </p>
</div>
</app-html-div>
<app-html-div name="green">
<div class="charat-list default-panel mui-panel">
  <h2 class="forstyle-h2"></h2>
  <p>
    <input type="button" value="1">
  </p>
  <p>
    <input type="button" value="2">
  </p>
</div>

в моей консоли журнала я вижу это

initializing

Спасибо за вашу помощь

Answer 1

Является ли второй экземпляр <app-html-div> рендеринга?

Возможно, что ваш первый экземпляр HtmlDivComponent инициализирует, запускает и дает сбой.Если в первом экземпляре компонента возникла проблема, это может помешать загрузке остальной части приложения.

Answer 2

Как уже говорилось в комментариях, консольный журнал в ngOnInit будет консоль в инструментах разработчика браузера столько раз, сколько использовался компонент

код примера - https://stackblitz.com/edit/angular-qwae9v?file=src/app/app.component.html
https://stackblitz.com/edit/angular-dvaleu?file=src/app/hello.component.ts

Inв вашем случае это не проблема с приложением, но инструменты разработчика браузера предназначены для объединения повторяющихся консольных сообщений в одно и отображения номера для повторения

Проверьте эту ссылку для справки - https://developers.google.com/web/tools/chrome-devtools/console/ каксогласно документации Chrome

Укладка сообщений
Если сообщение повторяется последовательно, а не распечатывает каждый экземпляр сообщения в новой строке, консоль «укладывает» сообщения и показываетчисло в левом поле вместо.Число указывает, сколько раз сообщение повторялось.

Просто для проверки и понимания, попробуйте этот простой пример

for (i = 0; i < 4; i++) { 
    alert("test")
    console.log("test")
}

//ouput you will see in console as 3 test, you will see three alert windows