无法绑定，因为它不是选择器组件的已知属性 [英] Can't bind to since it isn't a known property of selector component

问题描述

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

I want to pass a variable from one component to another and I'm using @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:

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:

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

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

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

Any idea on how to fix this?

推荐答案

很少尝试

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

First make sure you have import Input into your component

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

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

Then follow pascal convention when naming class

export class azeComponent implements OnInit 

应该改为

export class AzeComponent implements OnInit 

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

Then register your component into your module declarations

同样将 BrowserModule 导入到你的模块中，就像这样

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

这篇关于无法绑定，因为它不是选择器组件的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！