问题
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.
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.
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)
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"
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.
The parent component is something like this:
@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,
) { }
.......................................................
.......................................................
.......................................................
}
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. ("
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?
回答1:
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.
来源：https://stackoverflow.com/questions/53268068/why-am-i-obtaining-this-error-trying-to-bind-the-properties-from-an-angular-pare