为什么在尝试将Angular父组件的属性绑定到子组件时出现此错误? [英] Why am I obtaining this error trying to bind the properties from an Angular parent component to a child component?
问题描述
我在 Angular 中非常陌生，并且发现了一些困难，试图添加组件并将其用于我正在研究的项目中.
I am very new in Angular and I am finding some dificulties trying to add a component and use it into a project on which I am working on.
我有一个父组件视图，其中包含对2个子组件的引用(一个用来显示使用PrimeNG制作的两个不同的侧边栏，但我认为这并不重要):
I have a parent component view that contains thE referenceS to 2 child components, these one (used to show two different sidebar made using PrimeNG but I think taht it is not important):
<mail-detail-sidebar *ngIf="visibleSidebar"
[selectedMail]="selectedMail"
[visibleSidebar]="visibleSidebar"
(visibleSidebarEmitter)="visibleSidebarEmitter($event)">
</mail-detail-sidebar>
<mail-detail-protocollo-sidebar *ngIf="isProtocolloSideBarVisible"
[selectedMail]="selectedMail"
[isProtocolloSideBarVisible]="isProtocolloSideBarVisible"
(visibleSidebarEmitter)="visibleSidebarEmitter($event)">
</mail-detail-protocollo-sidebar>
第一个在我的项目中，并且工作正常，第二个用于添加第二个新的边栏(当用户单击按钮时显示)，它具有与第一个相同的逻辑(我必须只是内容而已)，但这却使我的应用程序停滞不前.
The first one was in my project and it works fine, the second one is used to add a second new sidebare (shown when the user click on a button) and it have the same logic of the first one (I have to change only come content) but it is brocking my application.
您可以看到我正在将子组件(具有 mail-detail-protocollo-sidebar 作为选择器的子组件)的值传递给子组件( selectedMail )的值>和 isProtocolloSideBarVisible (与第一个补充内容相同).唯一更改的是 isProtocolloSideBarVisible 变量的名称(具有完全相同的逻辑)
As you can see I am passing to the child component (the one having mail-detail-protocollo-sidebar as selector) the value of the 2 parent component properties selectedMail and isProtocolloSideBarVisible (that is the same identical thing that it does in the first sidebare). The only thing that changes here is the name of the isProtocolloSideBarVisible variable (that have the same exact logic)
这是我的 MailDetailProtocolloSidebarComponent 组件类的代码(与使用 mail-detail-protocollo-sidebar 作为选择器的组件有关):
This is the code of my MailDetailProtocolloSidebarComponent component class (related to the one having mail-detail-protocollo-sidebar as selector):
@Component({
selector: 'mail-detail-protocollo-sidebar',
templateUrl: '/app/maildetail/mail-datail-protocollo-sidebar.component.html',
styleUrls: ['../../app/maildetail/mail-detail-protocollo-sidebar.component.css']
})
export class MailDetailProtocolloSidebarComponent implements OnInit {
@Input() selectedMail: Mail;
//@Input() visibleSidebar: boolean;
@Input() isProtocolloSideBarVisible: boolean;
@Output() visibleSidebarEmitter = new EventEmitter<boolean>();
download: boolean;
destinatariCertificati: StatoInvio[];
destinatariPeo: StatoInvio[];
enableDownloadEml: boolean = true;
constructor(
private mailsService: MailsService,
) { }
ngOnInit(): void {
this.enableDownloadEml = this.selectedMail.Tipologia != "RICEVUTA";
this.setDestinatari();
this.download = false;
}
onHideSidebar($event) {
this.visibleSidebarEmitter.emit(false);
}
..........................................................
..........................................................
..........................................................
}
此类与其他第一个组件相同(没有问题). 我唯一要更改的是，现在我已重命名了布尔变量:
This class is identical to the other first component (that have no problem). The only thing that I change is that now I have the renamed boolean variable:
@Input() isProtocolloSideBarVisible: boolean;
因为在父组件视图中，我具有:
because in the parent component view I have:
[isProtocolloSideBarVisible]="isProtocolloSideBarVisible"
您可以在我的组件中看到，我声明了2个变量，它们使用 @Input()函数装饰器从父控制器获取数据:
As you can see in my component I declared the 2 varible that take the data from the parent controller using the @Input() function decorator:
@Input() selectedMail: Mail;
@Input() isProtocolloSideBarVisible: boolean;
因此从理论上讲，我认为父组件应该能够将值传递给此子组件.
so in theory I think that the parent component should be able to pass the values to this child component.
父组件是这样的:
@Component({
selector: 'mail-detail',
templateUrl: '/app/maildetail/mail-detail.component.html',
styleUrls: ['../../app/maildetail/mail-detail.component.css']
})
export class MailDetailComponent {
@Input() selectedMail: Mail;
@Output() actionMailEmitter = new EventEmitter<string>();
actionsMailMenu: MenuItem[];
visibleSidebar: boolean;
isProtocolloSideBarVisible: boolean;
isGraphEnabled: boolean;
download: boolean;
constructor(private appService: AppService,
private graphService: GraphService,
private mailsService: MailsService,
) { }
.......................................................
.......................................................
.......................................................
}
其中有两个必须传递给子组件的变量( selectedMail 和 isProtocolloSideBarVisible ).
where I have the 2 variables that have to be passed to the child component (selectedMail and isProtocolloSideBarVisible).
问题在于，我在控制台中使用了以下错误消息来破坏我的应用程序:
The problem is that in the console I obatin the following error message brocking my application:
Unhandled Promise rejection: Template parse errors:
Can't bind to 'selectedMail' since it isn't a known property of 'mail-detail-protocollo-sidebar'.
1. If 'mail-detail-protocollo-sidebar' is an Angular component and it has 'selectedMail' input, then verify that it is part of this module.
2. If 'mail-detail-protocollo-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<mail-detail-protocollo-sidebar *ngIf="isProtocolloSideBarVisible"
[ERROR ->][selectedMail]="selectedMail"
[isProtocolloSideBarVisible]="isProtoc"): ng:///app/maildetail/mail-detail.component.html@80:32
Can't bind to 'isProtocolloSideBarVisible' since it isn't a known property of 'mail-detail-protocollo-sidebar'.
1. If 'mail-detail-protocollo-sidebar' is an Angular component and it has 'isProtocolloSideBarVisible' input, then verify that it is part of this module.
2. If 'mail-detail-protocollo-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("le"
[selectedMail]="selectedMail"
[ERROR ->][isProtocolloSideBarVisible]="isProtocolloSideBarVisible"
(visibleSi"): ng:///app/maildetail/mail-detail.component.html@81:32
'mail-detail-protocollo-sidebar' is not a known element:
1. If 'mail-detail-protocollo-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'mail-detail-protocollo-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
我不明白为什么，因为在我看来，我使用的是拳头工作子组件的相同逻辑( mail-detail-sidebar 正常工作).
and I am not understanding why because it seems to me that I am using the same logic of the fist working child component (mail-detail-sidebar that works fine).
那么，怎么了?我想念什么?我该如何解决此问题?
So, what is wrong? What am I missing? How can I try to fix this issue?
推荐答案
请确保对于您正在使用的所有选择器，在您的模块(或在该模块已导入的模块之一)中声明组件. . mail-detail-protocollo-sidebar不是Web组件，表示该组件尚未在应用程序中的任何位置声明.
Please make sure that for all the selectors that you are using, the components are declared in your module (or in one of the modules which this module has imported). The mail-detail-protocollo-sidebar is not a web-component, which indicates that the component has not been declared anywhere in the application.
这篇关于为什么在尝试将Angular父组件的属性绑定到子组件时出现此错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
