Я очень новичок в Angular , и я нахожу некоторые трудности, пытаясь добавить компонент и использовать его в проекте, над которым я работаю.
У меня есть представление родительского компонента, которое содержит ссылки на 2 дочерних компонента, этот (используется для отображения двух разных боковых панелей, созданных с использованием PrimeNG, но я думаю, что это не важно):
<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>
Первый был в моем проекте, и он работает нормально, второй используется для добавления второго нового дополнения (показывается, когда пользователь нажимает на кнопку), и он имеет ту же логику первого (я должен изменить только прийти контент) но это брок мое приложение.
Как вы видите, я передаю дочернему компоненту (тот, у которого mail-detail-protocollo-sidebar в качестве селектора) значение 2 свойств родительского компонента selectedMail и isProtocolloSideBarVisible (это то же самое, что и в первой боковой панели). Единственное, что здесь меняется, - это имя переменной isProtocolloSideBarVisible (с точно такой же логикой)
Это код моего MailDetailProtocolloSidebarComponent класса компонента (относится к классу, имеющему mail-detail-protocollo-sidebar в качестве селектора):
@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);
}
..........................................................
..........................................................
..........................................................
}
Этот класс идентичен другому первому компоненту (у которого нет проблем).
Единственное, что я изменяю, это то, что теперь у меня есть переименованная логическая переменная:
@Input() isProtocolloSideBarVisible: boolean;
потому что в представлении родительского компонента:
[isProtocolloSideBarVisible]="isProtocolloSideBarVisible"
Как вы можете видеть в моем компоненте, я объявил 2 переменные, которые получают данные из родительского контроллера с помощью функции декоратора @ Input () :
@Input() selectedMail: Mail;
@Input() isProtocolloSideBarVisible: boolean;
поэтому в теории я считаю, что родительский компонент должен иметь возможность передавать значения этому дочернему компоненту.
Родительский компонент выглядит примерно так:
@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 ).
Проблема в том, что в консоли я получаю следующее сообщение об ошибке, взломавшее мое приложение:
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 , который работает нормально).
Итак, что не так? Что мне не хватает? Как я могу попытаться решить эту проблему?