無法在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 ，title和content

 <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不會嘗試將值解釋為表達式。