Question

我使用的是角度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

正如评论所讨论的那样，ngOnInit中的控制台日志将在浏览器开发人员工具中进行与所使用组件次数相同的次数

codesample- https://stackblitz.com/edit/angular-qwae9v?file=src/app/app.component.html
https://stackblitz.com/edit/angular-dvaleu?file=src/app/hello.component.ts

对于您来说，这不是应用程序的问题，而是浏览器开发人员工具旨在将重复的控制台消息堆叠为一个并显示重复次数

检查此链接以供参考-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

Answer 2

是use Auth;渲染的第二个实例吗？

您的HtmlDivComponent的第一个实例可能会初始化，运行并失败。如果该组件的第一个实例出现问题，则可能会阻止应用程序其余部分的加载。

Angular实例化组件更多次

2 个答案: