Question

我想获得组件的出现次数。 Menas想知道这个特定组件渲染的次数？

实际上，我制作了一台烤面包机并想知道它显示了多少次？

我的代码是：

main.component.ts：

      <toster-component [message]="'this is toster message'"   [type]="'danger'" [duration]="'15'"> </toster-component>
      <toster-component [message]="'this is toster message 2'" [type]="'info' 
  [duration]="'5'"> </toster-component>

toster.component.ts：

import { Component,Input,OnInit,ContentChildren,ElementRef,QueryList } from '@angular/core';

@Component({
  selector: 'toster-component',
  templateUrl: './toster.component.html',
  styleUrls: ['./toster.component.css'],
});

export class TosterComponent implements OnInit {
  public isShow:any=true;
  public TabItem:any;

  @Input() message:string;  // Will show the message.
  @Input() type:string; // What type will decide the style of this toster.
  @Input() duration:number; // If duration ( In second ) is available the it will show till duration otherwise it will show permanently till manually closed 

  @ContentChildren(TosterComponent, {read: ElementRef}) tosterComponents:QueryList<TosterComponent>;

  ngAfterContentInit() {
       console.log("Length: ",this.tosterComponents.toArray().length);
     }


  ngOnInit(){
      this.message=this.message?this.message:'Test Message';
      this.type=this.type?this.type:'info';    

      if(this.duration>0){
          setTimeout(()=>{
            this.isShow=false;
          },this.duration*1000);
       } 
    } 


 }

在上面的代码中，我使用的是以下代码：

@ContentChildren(TosterComponent, {read: ElementRef}) tosterComponents:QueryList<TosterComponent>;

ngAfterContentInit() {
           console.log("Length: ",this.tosterComponents.toArray().length); // I want to print the instance of this component.
         }

实现相同，但它只显示 1 。但它应该 2 ，因为它在 main.component.ts 中使用了2次。

Answer 1

我不知道你如何处理你的烤面包机，但是当我做了一个并且使用过烤箱时，我正在使用一种服务。

当你有服务时，它会被@Injectable修饰，这意味着它是一个单身人士。

因此，您可以将其视为真理的唯一来源，并使用它来存储您的烤面包机信息。

所以，回答你的问题：创建一个可以创建烤面包机的服务。当您显示一个时，将1添加到计数器，当它消失时，从计数器中删除1。

Answer 2

您可以声明一个static类变量，并在每次constructor()运行时增加其计数。

我在这里准备了THIS。

以角度2/4/6获取组件实例的数量？

2 个答案: