Angular 4 Library @Input

Question

嗨，伙计们，我需要一些帮助，因为我似乎无法让它工作。我想我可能使用了不正确的语法或其他东西。

我目前正在使用 YO https://github.com/jvandemo/generator-angular2-library 构建 Angular 4 库

所以除了@Input装饰器之外，一切都在工作。

这里有一些简单的代码

import { Component, Input } from '@angular/core';
@Component({
selector: 'sample-component',
template: `<h1>Sample component {{hello}}</h1>`
})
export class SampleComponent {
@Input('hello') hello: string;
constructor() {
}
}

我使用 npm 构建包，然后导入到 dist 到另一个应用程序中，然后导入模块。

然后，我按如下方式使用此组件：

<sample-component hello="koos"></sample-component>

它运行良好，并显示正确的消息。

我的问题是关于何时像这样绑定hello属性

<sample-component [hello]="koos"></sample-component>

我在后端有变量koos = 'hello I am koos;'它根本不绑定到它？

我应该使用其他方法来执行此操作吗？有没有另一种方法可以绑定@Input和@Output变量？

您的见解将不胜感激。

根据要求，父组件：

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {
koos: 'Ek is Koos';
}

我显然删除了其他代码，因为这是唯一必需的部分。

Answer 1

这是你的错误：

koos: 'Ek is Koos'; // < --- you create type 'Ek is Koos'

解决方案是像这样创建：

koos:string = 'Ek is Koos';