为什么我在尝试将 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.
如您所见，我将两个父组件属性 selectedMailmail-detail-protocollo-sidebar 作为选择器的组件)> 和 isProtocolloSideBarVisible(这与它在第一个 sidebare 中所做的相同).此处唯一更改的是 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"
正如您在我的组件中看到的，我声明了使用 @Input() 函数装饰器从父控制器获取数据的 2 个变量:
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屋！
