Question

为什么输入绑定不起作用？我已经使用了IntelliJ创建的框架代码，并用我的组件app替换了默认的my-para组件。以下是代码段。

的index.html

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

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

我只看到＆＃34;你好＆＃34;但不是＆＃34;你好说些什么＆＃34;

Answer 1

如果使用方括号，它会尝试绑定对象。所以<my-para [paratext]="say something"></my-para>代码会查找“说些什么”属性。

只需传递不带括号的字符串。

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

另一个节点，

在index.html中，应该只有一个应用程序组件。在app.component.html中使用它 <my-para paratext="say something"></my-para>

在MyParaComponent组件中，只使用@Input（）装饰器而不是Component的输入属性。您要两次定义输入。

Answer 2

从以下SO回答得到帮助（你们也提到了一些观点）

Angular 2 Component @Input not working

似乎我无法在根组件中传递输入。解释在这里 - Angular 2 input parameters on root directive

我创建了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
  ],

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

2 个答案: