输入绑定在Angular / IntelliJ中不起作用

Question

Why is the input binding not working? 为什么输入绑定不起作用？ I have taken the framework code created by IntelliJ and have replaced the default app component with my component my-para . 我已经采用了IntelliJ创建的框架代码，并用我的组件my-para替换了默认的app组件。 Following is the code snippet. 以下是代码段。

index.html index.html

<body>
  <my-para [paratext]="say something"></my-para>
</body>

paragraph.component.ts 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 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 { }

I see only "hello" but not "hello say something" 我只看到“你好”，而没有看到“你好说些什么”

Answer 1

If you use square brackets, it tries to bind an object. 如果使用方括号，它将尝试绑定对象。 So <my-para [paratext]="say something"></my-para> code looks for "say something" attribute. 因此， <my-para [paratext]="say something"></my-para>代码将查找“ say something”属性。

Just pass your string without brackets. 只需传递不带方括号的字符串即可。

<my-para paratext="say something"></my-para>

Also another node, 还有另一个节点

In your index.html there should be an app component only. 在index.html中，应仅包含一个应用程序组件。 Use it inside your app.component.html <my-para paratext="say something"></my-para> 在您的app.component.html <my-para paratext="say something"></my-para>

Inside your MyParaComponent component, just use @Input() decorator not inputs attribute of Component. 在MyParaComponent组件内部，仅使用@Input（）装饰器，而不使用Component的input属性。 You are defining your inputs twice. 您正在两次定义输入。

Answer 2

Got help from following SO answer (some points were mentioned by you guys as well) 遵循SO解答后得到了帮助（你们也提到了一些要点）

Angular 2 Component @Input not working Angular 2组件@Input无法正常工作

It seems I cannot pass input in root component. 看来我无法在根组件中传递输入。 Explanation is here - Angular 2 input parameters on root directive 解释在这里-root指令上的Angular 2输入参数

I created AppComponent. 我创建了AppComponent。 Then in AppComponent's template, I used MyParaComponent 然后在AppComponent的模板中，我使用了MyParaComponent

index.html index.html

<body>
  <app-root></app-root>
</body>

app.component.ts app.component.ts

@Component({
  selector: 'app-root',
  template: `<my-para [paratext]="'say something'"></my-para>`
})
export class AppComponent {
}

app.module.ts - had to add both AppComponent and MyParaComponent in declarations app.module.ts-必须在声明中同时添加AppComponent和MyParaComponent

declarations: [
    AppComponent,
    MyParaComponent
  ],

输入绑定在Angular / IntelliJ中不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-06-22 07:39:50

解决方案2
0 2017-06-22 08:01:54

输入绑定在Angular / IntelliJ中不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-06-22 07:39:50

解决方案2 0 2017-06-22 08:01:54

解决方案1
1 已采纳 2017-06-22 07:39:50

解决方案2
0 2017-06-22 08:01:54