我想将变量从一个组件传递到另一个组件,并且我正在使用 @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”的已知属性。
知道如何解决这个问题吗?
几乎没有什么可以尝试的
首先确保您已将输入导入到组件中
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 { }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)