无法将数据从 parent 传递到 angular4 中的 child 组件

Question

当我尝试将数据从 parent 传递到 child 组件时出现错误。

这是我放在 parent 组件中的标签。

<pop-up [showPopUp]="true" [content]="content" [title]="title goes here"></pop-up>

Child分量

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


@Component({
  selector: 'pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {
  @Input()
  showPopUp: boolean;
  @Input()
  title: string = "";
  @Input()
  content: string = "";

  constructor() {
  }
  ngOnInit() {
    debugger;
  }
  proceed() {
    this.showPopUp = true;
  }
  closePopUp() {
    this.showPopUp = false;
  }
}

我想像这样在 HTML 中使用变量 showPopUp、标题和内容

 <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
 <h5 class="modal-title" id="exampleModalLabel">{{content}}</h5>

但是当我尝试使用它时，出现错误

我不确定我到底做错了什么。

Answer 1

[title]="title goes here"

应该是

[title]="'title goes here'"

或

title="title goes here"

您的原始代码试图将表达式 title goes here 的值赋给 title，但那不是有效的表达式。您可以使表达式成为字符串文字，或删除 []，然后 Angular 将不会尝试将值解释为表达式。

无法将数据从 parent 传递到 angular4 中的 child 组件

Not able to pass data from parent to child component in angular4

angular-components

angular