Question

如何在视图中显示组件输入属性？

我尝试了几种方式，包括这种方式，但没有一种方法可以使用：https://ngdev.space/angular-2-input-property-changes-detection-3ccbf7e366d2

组件使用：

<card [title]='My Awesome Card'></card>

模板：

<div class="ui card">
  <div class="content">
    <div class="header">{{ title }}</div>
  </div>
</div>

组件声明的一部分：

@Component({
  selector: 'card',
  templateUrl: './card.component.html'
})

export class CardComponent implements OnInit {

  private _title: string;

  get title(): string {
    return this._title;
  }

  @Input()
  set title(title: string) {
    console.log('prev value: ', this._title);
    console.log('got title: ', title);
    this._title = title;
  }

  ...

Answer 1

字符串可以绑定到@Input属性，如下所示

<card [title]="'My Awesome Card'"></card>

Answer 2

我看到有2个错误

传递字符串文字 #{format(minusDays(node.@scheduledStartTime,1),"MM-dd-YYYY”)} - 当你传递字符串而不是引号之间的变量传递时。

@Input - 当数据传递给child时，它需要是@Input变量而不是函数。你需要将变量声明为@Input

<card [title]="'My Awesome Card'"></card>

Answer 3

在组件声明部分，我们可以按如下方式传递输入变量 -

@Input（）title：string =“My Awesome Card”;

或

@Input（）title：string

（Angular4 / TypeScript）如何将组件@Input属性绑定到View？

3 个答案: