缺少属性@ViewChildren

Question

我是Angular的初学者，我想得到一些帮助，了解起源的问题，但我不知道如何解决。所以我想得到一些帮助。首先，这是我的scr文件夹的图片：

​

​

我的错误位于我的upgrade.component.ts中，它是：

export class UpgradeComponent implements OnInit {
  canclose=false;
  @Input() upgrade: Pallier[];
  server = "http://localhost:8080/";
  @Input() world: World;
  @Input() money: number;

  @Output() closemodalevent = new EventEmitter<void>();

  constructor(private snackBar: MatSnackBar, private service: RestserviceService) { 

  }

  ngOnInit(): void {
  }
  popMessage(message: string) : void {
    this.snackBar.open(message, "", {duration : 2000});
  }

  closemodal(){
    if(this.canclose){
      this.closemodalevent.emit();
    }else{
      this.canclose=true;
    }
  }

  purchaseUpgrade(p: Pallier) {
    if (this.world.money > p.seuil) {
      this.world.money = this.world.money - p.seuil;
      this.world.upgrades.pallier[this.world.upgrades.pallier.indexOf(p)].unlocked = true;
      this.popMessage("Achat d'une upgrade de" +p.typeratio);
      if (p.idcible == 0) {
        this.productsComponent.forEach(prod => prod.calcUpgrade(p));
        this.popMessage("Achat d'une upgrade de ");
      }
      else {
        this.productsComponent.forEach(prod => {
          if (p.idcible == prod.product.id) {
            prod.calcUpgrade(p);
            this.popMessage("Achat d'une upgrade de " +p.typeratio);
          }
        })
      }
      this.service.putUpgrade(p);
    }
  }
}

错误很简单：

'UpgradeComponent‘类型上不存在属性'productsComponent’。

问题不在于这个属性位于app.component.ts，而在于@ViewChildren.Here is my app.component.ts：

export class AppComponent {
  @ViewChildren(ProductComponent) public productsComponent: QueryList<ProductComponent>;
  title = 'AngularProject';
  world: World = new World();
  server: String;
  username: string;
  qtmulti = "x1";
  modal: string=null;

  constructor(private service: RestserviceService, public snackBar: MatSnackBar) {
    this.server = service.getServer();
    this.username = localStorage.getItem("username");
    // Fonction créant un nom de joueur aléatoire si le nom du joueur est et qui sera sauverarder dans le serveur
    if (this.username == '') {
      this.username = 'Player' + Math.floor(Math.random() * 10000);
      localStorage.setItem("username", this.username);
    }
    this.service.setUser(this.username);
    service.getWorld().then(world => { this.world = world; });
  }

  popMessage(m: string) : void {
    this.snackBar.open(m, "", { duration: 2000 });
  }
}

我在网上绝对找不到任何东西，我也不知道如何解决这个错误……

我要提前感谢那些好心照亮我的人。

Answer 1

@ViewChildren装饰器只在您正在使用的组件内部工作，并且它只为您在其html模板内调用的html组件查找。

export class AppComponent {
    @ViewChildren(ProductComponent) public productsComponent: QueryList<ProductComponent>;
}

然后在应用程序模板中

<product-component #p1></product-component>
<product-component #p2></product-component>
<product-component #p3></product-component>

在本例中，您应该在升级组件中声明@ViewChildren，并在其html模板中将所有产品组件调用为html标记。

Answer 2

您正尝试在UpgradeComponent中引用ProductComponent。但你没有在UpgradeComponent中调用ProductComponent。UpgradeComponent中的this将引用UpgradeComponent中声明的属性和方法。这就是为什么你得到error Property 'productsComponent' does not exist on type 'UpgradeComponent'.来访问你可以使用Input / Output decorator , Passing the reference of one component to another, service or @ViewChild/ @ViewChildren的其他组件数据。此博客将帮助您https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb