Angular 4 个库 @Input

Question

大家好，我需要一点帮助，因为我似乎无法让它工作。我想我可能使用了不正确的语法或其他东西。

我目前正在使用 YO Angular 4 个图书馆 https://github.com/jvandemo/generator-angular2-library

所以除了 @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';

Angular 4 个库 @Input

Angular 4 Library @Input

npm

yo

angular

angular-library