Question

我正在Angular 2中开发一个简单的测试应用程序，并且在将属性传递给嵌套组件时遇到了问题。请参阅下面的源代码。嵌套组件中的模板呈现，但传递给嵌套组件的属性不会呈现。渲染输出为：

这是一个。

然而，我希望如下：

这是一个测试。

浏览器控制台中未生成任何错误。我也尝试在嵌套组件中使用properties: 'inputtext'，因为视图中的名称保持不变，但这会在控制台中生成无法绑定到... 错误。至于Angular2版本，我使用的是最新的（Alpha-34）。

有什么建议吗？

的index.html

<html>
  <head>
    <title>Angular 2 Test App</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
  </head>
  <body>
    <h1>Welcome to my Angular 2 Test App</h1>
    <app></app>
    <script>System.import('app');</script>
  </body>
</html>

app.ts

import {Component, View, bootstrap} from 'angular2/angular2';

//nested component
@Component({
  selector: 'input-component',
  properties: ['inputtext:inputtext']
})
@View({ template: '<h1>This is a {{inputtext}}.</h1>'})
class inputComponent{}

// root app
@Component({ selector: 'app' })
@View({ 
  directives: [inputComponent], 
  template: '<input-component [inputtext]="test"></input-component>' 
})
class rootApp{}

bootstrap(rootApp);

Answer 1

这是因为你没有在你的属性上绑定变量，你只需要传递一个字面值。在这种情况下，你需要删除方括号并给它这样：inputtext =＆＃34; test＆＃34;。如果你使用方括号angular2将期望一个变量，并将尝试映射到它，这将给你未定义。

另请注意，当您定义属性时，如果控制器中的变量与您公开的属性具有相同的名称，则可以使用缩写形式：

properties: ['inputtext']

Answer 2

template: '<input-component [inputtext]="\'test\'"></input-component>'

在您的代码中测试是一个未定义的变量。用引号包裹它，它应该工作。

Angular2：将属性传递给嵌套组件

2 个答案: