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

时间:2019-09-06 10:14:07

标签: javascript angular typescript angular8

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

@NgModule({
    declarations: [
        AppComponent,
        MyDialogComponent

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

当我显示父组件模板时,出现此错误:

  

无法绑定到“ hellovariable”,因为它不是“ app-my-dialog”的已知属性。

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

3 个答案:

答案 0 :(得分:0)

没什么可尝试的

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

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

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

export class azeComponent implements OnInit 

应更改为

export class AzeComponent implements OnInit 

然后将组件注册到模块declarations

也将BrowserModule导入模块中

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

答案 1 :(得分:0)

大多数情况下都会出现此错误,因为您忘记了在app.module.ts中声明该组件或执行了错误

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

答案 2 :(得分:-1)

确定此错误是由于您需要在azeComponent的模块中导入MyDialogComponent。