[英]input binding not working in Angular/IntelliJ
为什么输入绑定不起作用? 我已经采用了IntelliJ创建的框架代码,并用我的组件my-para
替换了默认的app
组件。 以下是代码段。
index.html
<body>
<my-para [paratext]="say something"></my-para>
</body>
para.component.ts
import {Component, Input } from "@angular/core";
@Component({
selector: 'my-para',
inputs: ['paratext'],
template:`
<p>Hello {{this.paratext}}</p>
`
})
export class MyParaComponent {
@Input() paratext: string;
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MyParaComponent} from './paragraph.component'
@NgModule({
declarations: [
MyParaComponent,
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [MyParaComponent]
})
export class AppModule { }
我只看到“你好”,而没有看到“你好说些什么”
如果使用方括号,它将尝试绑定对象。 因此, <my-para [paratext]="say something"></my-para>
代码将查找“ say something”属性。
只需传递不带方括号的字符串即可。
<my-para paratext="say something"></my-para>
还有另一个节点
在index.html中,应仅包含一个应用程序组件。 在您的app.component.html <my-para paratext="say something"></my-para>
在MyParaComponent组件内部,仅使用@Input()装饰器,而不使用Component的input属性。 您正在两次定义输入。
遵循SO解答后得到了帮助(你们也提到了一些要点)
看来我无法在根组件中传递输入。 解释在这里-root指令上的Angular 2输入参数
我创建了AppComponent。 然后在AppComponent的模板中,我使用了MyParaComponent
index.html
<body>
<app-root></app-root>
</body>
app.component.ts
@Component({
selector: 'app-root',
template: `<my-para [paratext]="'say something'"></my-para>`
})
export class AppComponent {
}
app.module.ts-必须在声明中同时添加AppComponent和MyParaComponent
declarations: [
AppComponent,
MyParaComponent
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.