时间戳

首页 > 解决方案 > 如何将数据从模板发送到 Angular 中包含的组件？

angular - 如何将数据从模板发送到 Angular 中包含的组件？

问题描述

这是一个示例组件：

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  @Input()
  setTestVar: string = '';
  testVar: string = '';

  constructor() { }

  ngOnInit(): void {
    this.testVar = this.setTestVar;
  }
}

您可以从另一个组件模板中像这样使用它：

...
<app-test [setTestVar]="variable_from_calling_component"></app-test>
...

但是我怎样才能在调用组件中设置一个不作为变量存在的值。如何使用刚刚在调用模板中定义的值？

...
<app-test [setTestVar]="some_value"></app-test> /** does not work **/
...

标签： angular

解决方案

组件的输入需要一个字符串。如果您在 angular 中使用 [] 括号，则它需要一个方法名称或变量存在于 typescript 文件中。如果要传递新字符串，请使用：

<app-test [setTestVar]="'some_value'"></app-test>

或者，您可以使用：

<app-test setTestVar="some_value"></app-test>

推荐阅读