无法绑定，因为它不是选择器组件的已知属性

Question

我想将变量从一个组件传递到另一个组件，并且我正在使用 @input

这是我的父组件：

@Component({
    selector: 'aze',
    templateUrl: './aze.component.html',
    styleUrls: [('./aze.component.scss')],
    providers: [PaginationConfig],
})

export class azeComponent implements OnInit {
    public hellovariable: number = 100;
}

这是父组件的模板：

<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>

这是我的子组件：

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})

export class MyDialogComponent implements OnInit {
  @Input() hellovariable: number;
  constructor() { }

  ngOnInit() {
    console.log(hellovariable);
  }

这是子模板：

 <h3>Hello I am {{hellovariable}}<h3>

这是app.module.ts：

@Component({
    selector: 'aze',
    templateUrl: './aze.component.html',
    styleUrls: [('./aze.component.scss')],
    providers: [PaginationConfig],
})

export class azeComponent implements OnInit {
    public hellovariable: number = 100;
}

当我显示父组件模板时，出现此错误：

无法绑定到“hellovariable”，因为它不是“app-my-dialog”的已知属性。

知道如何解决这个问题吗？

Answer 1

几乎没有什么可以尝试的

首先确保您已将输入导入到组件中

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

然后在命名类时遵循pascal约定

export class azeComponent implements OnInit 

应该改为

export class AzeComponent implements OnInit 

然后将您的组件注册到您的模块中declarations

还将 BrowserModule 导入到您的模块中，也是这样的

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent,
    AzeComponent   
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }