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

问题描述

我想将变量从一个组件传递到另一个组件，而我正在使用@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:

关于如何解决此问题的任何想法?

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

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