Question

以下是具有@Input()属性的组件的代码。

import { Component } from '@angular/core';

@Component({
selector: 'cd',
template: ` 
<h2>{{input1}}</h2>

`
})

export class cdComponent{

 @Input() input1: string;

}

我想在其他组件中使用这个组件，下面将提到父组件的代码。

import { Component } from '@angular/core';

@Component({
selector:'main',
template: `
<cd [input1]="test"></cd>
<h2> Main Route </h2>
`
})

export class MainComponent{

}

当MainComponent显示在浏览器中时，我希望同时显示来自子组件的“测试”文本。

但是“测试”文本没有显示出来。任何帮助将不胜感激。

Answer 1

它不会显示，因为您将名为test的变量传递给input1，但它不存在。当您使用[]将值传递给输入时，它会查找名为test的变量，我的猜测是您只想传递字符串test。有两种方法可以做到这一点：

<cd [input1]="'test'"></cd>

或者：

<cd input1="test"></cd>

Angular2中的输入属性绑定

1 个答案: