Question

我正在一个component中创建自定义属性，我希望通过 @Input（）在另一个component中访问该属性，但它在第二个组件中没有任何效果甚至显示结果（自定义属性）的初始值，我在控制台中没有收到任何错误，我也在线搜索解决方案，找到一些，但无法让它工作。

请帮帮我，这是我的代码。

Demo Plunker由用户在评论中创建。

property-binding-component.ts（Child）

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-property-binding',
  template: `
      {{result}} //value working here 
  `,
  styles: []
})
export class PropertyBindingComponent{
   @Input() result: number = 5000; 
}

已更新 的数据绑定-components.ts（父）

import { Component} from '@angular/core';

@Component({
  selector: 'app-databindings',
  templateUrl: './databindings.component.html',
  styleUrls: ['./databindings.component.css']
})
export class DatabindingsComponent {
}

databindings-component.html（父级）

<app-property-binding [result]="300">   </app-property-binding>
//not working here not event showing the value `5000`

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { DatabindingsComponent } from './databindings/databindings.component';
import { PropertyBindingComponent } from './databindings/property-binding.component';

@NgModule({
  declarations: [AppComponent, DatabindingsComponent, PropertyBindingComponent ],
  imports: [
  BrowserModule,
  FormsModule,
  HttpModule
 ],
  providers: [],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

感谢

Answer 1

Plunker演示工作正常。我猜错了原因：

检查您的本地设置。

检查＆＃34; app.module.ts＆＃34;文件并查看导入和声明部分中是否存在拼写错误。
检查您的拼写＆＃34; property-binding-component.ts＆＃34;文件（您在问题中输入的内容），应该是＆＃34; property-binding.component.ts＆＃34;。
检查您的＆＃34;数据绑定-component.html＆＃34;文件，并仔细检查选择器名称是否匹配。（因为你甚至看不到＆＃34; 5000＆＃34;）。

自定义属性绑定@Input无法正常工作

1 个答案: