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

Question

I want to pass a variable from one component to another and I'm using @input

This is my parent component :

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

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

This is the template of the parent component:

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

This is my child component :

@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);
  }

This is the child template:

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

And this is the app.module.ts:

 @NgModule({ declarations: [ AppComponent, MyDialogComponent ], entryComponents: [ MyDialogComponent ], imports: [ BrowserModule, routing, NgbModule, BrowserAnimationsModule, ToastrModule.forRoot(), RichTextEditorAllModule, FullCalendarModule, NgMultiSelectDropDownModule.forRoot(), LeafletModule.forRoot(), NgxGalleryModule, HttpClientModule, MatDialogModule, ReactiveFormsModule ],

When I show my parent component template I get this error:

Can't bind to 'hellovariable' since it isn't a known property of 'app-my-dialog'.

Any idea on how to fix this?

Answer 1

Few thing to try

First make sure you have import Input into your component

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

Then follow pascal convention when naming class

export class azeComponent implements OnInit 

should change to

export class AzeComponent implements OnInit 

Then register your component into your module declarations

Also import BrowserModule into your module also something like this

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

Answer 2

Mostly you'll get this error because you forgot to declare the component into your app.module.ts or did it wrong

app.module.ts

import { YourSpecificComponent } from './components/measureUnit/measure-unit-monthly/measure-unit-monthly.component';

@NgModule({
declarations: [
    AppComponent,
    MessageComponent,
    DashboardComponent,
    .....,
    YourSpecificComponent, // declared here
}

your-specific.component.ts

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

export class YourSpecificComponent implements AfterContentInit {
.....

Answer 3

好的，这个错误是因为你需要在 azeComponent 的模块中导入 MyDialogComponent。