javascript - @Input 和@Output 在 Angular 5 中始终未定义

Question

个人内部的任何值都可以毫无问题地打印出来，但是使用@Input 或@Output 获得的任何值都不会正确显示。

我正在尝试使用父属性 parentData 在 child.component.ts 中分配 childData。

同样，我正在尝试将子属性“数据”分配给父属性“数据”

child.component.ts

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

  @Input() public childData: string;
  @Output() public event: EventEmitter<string> = new EventEmitter();
  public data = 'Harsha';
  constructor() { }

  onClick() {
    console.log("sending value to parent:"+this.data);
    this.event.emit(this.data);
  }

  ngOnInit() {
  }

}

parent.component.ts

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

  public parentData = 'Hello Parent';
  public data: string;

  constructor() { }

  onOutputEvent(data: string){
    console.log("in parent:"+data);
    this.data = data;
  }

}

<!-- child.component.html -->
<h3>Printing parent value in child component: {{childData}}</h3>

<h4>Printing child value:{{data}}</h4>

<button (click)="onClick()">Send value to parent</button>

<!-- parent.componnt.html -->
<h3>Printing parent Data: {{parentData}}</h3>
<h4>Printing child Data: {{data}}</h4>

<app-child> [childData]="parentData" (event)="onOutputEvent($event)"</app-child>

<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-parent></app-parent>

Answer 1

您在分配属性之前关闭了标签。

<app-child [childData]="parentData" (event)="onOutputEvent($event)"></app-child>