Почему я получаю эту ошибку, пытаясь связать свойства родительского компонента Angular с дочерним компонентом? - PullRequest
Новая
       20

Почему я получаю эту ошибку, пытаясь связать свойства родительского компонента Angular с дочерним компонентом?

0 голосов
/ 12 ноября 2018

Я очень новичок в 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 , который работает нормально).

Итак, что не так? Что мне не хватает? Как я могу попытаться решить эту проблему?

1 Ответ

0 голосов
/ 12 ноября 2018

Пожалуйста, убедитесь, что для всех селекторов, которые вы используете, компоненты объявлены в вашем модуле (или в одном из модулей, которые этот модуль импортировал).mail-detail-protocollo-sidebar не является веб-компонентом, что указывает на то, что компонент не был объявлен где-либо в приложении.

...