将数据传递到子组件Angular 9

Question

我在kendo ui angular Panelbar中有一个子组件，我需要向其传递ID，但是它在api url中未定义。这是代码：

 <kendo-panelbar [expandMode]="kendoPanelBarExpandMode">
 <kendo-panelbar-item *ngFor="let event of events" [title]="event.title">    
 <ng-template kendoPanelBarContent>
  <br>      
  {{event.id}}
  <app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering- 
 emp-list>
 </ng-template>
 </kendo-panelbar-item>
 </kendo-panelbar>

Answer 1

我认为是这个问题

更改线

<app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering-emp-list>

对此

    <app-volunteering-emp-list [eventID]="event.id"></app-volunteering-emp-list>

Answer 2

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}