在 Angular 中无法将值从父级传递给子级

Question

我正在尝试编写一个非常简单的程序，将值从父组件传递到子组件。在下面的代码中，我试图打印 firstName(John) 但如屏幕截图所示，它没有被打印出来。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName = "John";
}

app.component.html

<app-cards>
  [firstName]="firstName"
</app-cards>

card.component.ts

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

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html',
  styleUrls: ['./cards.component.css']
})
export class CardsComponent implements OnInit {
  @Input() firstName : string | undefined;

  constructor() { }

  ngOnInit(): void {
  }

}

card.component.html

<div>
    First Name: {{ firstName }}
</div>

输出：

Answer 1

您的 app.component.html 文件有误。 <app-cards> 元素标记之间有 [firstName]，而不是将其作为属性。

app.component.html

<app-cards
  [firstName]="firstName">
</app-cards>

在 Angular 中无法将值从父级传递给子级

Not able to pass values from Parent to child in Angular

angular

angular12

app.component.html