無法綁定，因為它不是選擇器組件的已知屬性

Question

我想將一個變量從一個組件傳遞到另一個組件，並且我正在使用 @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”的已知屬性。

關於如何解決這個問題的任何想法？

Answer 1

很少嘗試

首先確保您已將 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 { }

Answer 2

大多數情況下，您會收到此錯誤，因為您忘記將組件聲明到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 {
.....

Answer 3

好的，這個錯誤是因為你需要在 azeComponent 的模塊中導入 MyDialogComponent。