无法在angular4中将数据从父组件传递到子组件

Question

当我尝试将数据从父组件传递给子组件时，我收到错误。

这是我将它放在父组件中的标签。

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

子组件

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一样使用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不会尝试将该值解释为表达式。