Can't bind to since it isn't a known property of selector component

问题

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?

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

回答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 {
.....

回答3:

ok this error causes because you need to import MyDialogComponent in azeComponent's module.

来源：https://stackoverflow.com/questions/57820069/cant-bind-to-since-it-isnt-a-known-property-of-selector-component

标签

javascript

angular

typescript

angular8