javascript - Can't bind to since it isn't a known property of selector component - Stack Overflow

admin管理员组

文章数量:1302957

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

This is my parent ponent :

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

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

This is the template of the parent ponent:

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

This is my child ponent :

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialogponent.html',
  styleUrls: ['./my-dialogponent.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
    ],

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

This is my parent ponent :

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

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

This is the template of the parent ponent:

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

This is my child ponent :

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.ponent.html',
  styleUrls: ['./my-dialog.ponent.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 ponent 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?

• javascript
• angular
• typescript
• angular8

Share Improve this question Follow edited Sep 8, 2019 at 7:47 mecabmecab95 asked Sep 6, 2019 at 10:14 mecabmecab95mecabmecab95 10122 gold badges33 silver badges1010 bronze badges 2

• Is the ponent added to the module? – heldt Commented Sep 6, 2019 at 10:15
• you mean in the app.module.ts i have added parent ponent in declaration or no ? – mecabmecab95 Commented Sep 6, 2019 at 10:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Few thing to try

First make sure you have import Input into your ponent

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 ponent 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.ponent';

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

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

app.module.ts

import { YourSpecificComponent } from './ponents/measureUnit/measure-unit-monthly/measure-unit-monthly.ponent';

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

your-specific.ponent.ts

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

export class YourSpecificComponent implements AfterContentInit {
.....

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

本文标签： javascriptCan39t bind to since it isn39t a known property of selector componentStack Overflow