我试图将变量从父组件传递到子组件。为此，我想使用 @Input() 方法 ，但是当我尝试连接这两个组件时，整个网站都显示为空白页。简单地说，网站根本没有响应。

我将以下代码写入 parent.html

<app-test [id] = "id" [name]="name" [request]="request" [label]="label"></app-test>

然后，我将输入方法添加到 test.ts (child)

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

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

  @Input() id =-1;
  @Input() name='';
  @Input() request='';
  @Input() label='';

  parameters:any=[];
  countryId:number=0;
  apiList:any;

  constructor() { }

  ngOnInit(): void {
  }

}

然后，我得到了一个空白页。开始时没有错误，但 30 秒后，我在检查器控制台中收到以下错误。你能帮助我吗？

Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

编辑：我的父组件：

import { Component, OnInit } from '@angular/core';
import {MenuItem} from 'primeng/api';
import { TheDataOfEverythingService } from 'src/app/service/the-data-of-everything.service';

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

  display:boolean = false;
  items: MenuItem[]=[];
  sidebarItems: MenuItem[]=[];
  id:number=-1;
  name:string='';
  request:string='';
  label:string='';

  constructor(private service:TheDataOfEverythingService) { }

  ngOnInit(): void {

    this.getApiList();

    this.items = [
      {
        label:'Home',
        icon:'pi pi-fw pi-home',
        routerLink: '/home'
      },
      {
        label:'Contact',
        icon:'pi pi-fw pi-phone',
        routerLink: ['/contact'],
      },
      {
        label:'Sign Up',
        icon:'pi pi-fw pi-user-plus'
      }
  ];
  
    this.sidebarItems = [
      {
      label:'World',
      icon:'pi pi-fw pi-globe',
      items: []
      },
    ]
  }


  apiList:MenuItem[]=[];
  getApiList(){
    this.service.getAllData("ApiList")
    .subscribe(data=> {
      this.apiList = data as MenuItem[];

      let index;
      this.apiList.forEach(item=>{
        const newMenuItem: MenuItem ={
          label: item.label,
          //icon: item.icon,
          routerLink: item.routerLink
        }
        if(newMenuItem.routerLink.includes('world')){
          index = this.sidebarItems.findIndex(e=> e.label == "World")
          this.sidebarItems[index].items?.push(newMenuItem);
        }
      })
    });
  }
}

编辑 2：我的父组件的 HTML：

<p-menubar [model]="items">
    <ng-template pTemplate="start">
        <a (click)="display = true">
            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Noun_Data_2223266.svg" height="40" class="mr-2">
        </a>
    </ng-template>
    <ng-template pTemplate="end">
        <input type="text" pInputText placeholder="Search">
    </ng-template>
</p-menubar>

<p-sidebar [(visible)]="display">
    <p-panelMenu [model]="sidebarItems" [style]="{'width':'280px'}"></p-panelMenu>
</p-sidebar>

<app-test [id] = "id" [name]="name" [request]="request" [label]="label"></app-test>