无法在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中使用变量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 就不会尝试将值解释为表达式。