为什么我在尝试将 Angular 父组件的属性绑定到子组件时出现此错误？

Question

我是 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>

第一个在我的项目中并且工作正常，第二个用于添加第二个新的侧边栏（当用户单击按钮时显示）并且它具有与第一个相同的逻辑（我必须只更改内容）但它正在阻止我的应用程序。

如您所见，我将 2 个父组件属性的值传递给子组件（具有 mail-detail-protocollo-sidebar 作为选择器的子组件）selectedMail 和 isProtocolloSideBarVisible（这与它在第一个边栏中所做的相同）。这里唯一改变的是 isProtocolloSideBarVisible 变量的名称（具有完全相同的逻辑）

这是我的 MailDetailProtocolloSidebarComponent 组件 class 的代码（与 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);
    }

    ..........................................................
    ..........................................................
    ..........................................................
}

此class 与其他第一个组件相同（没有问题）。我唯一改变的是现在我有了重命名的布尔变量：

@Input() isProtocolloSideBarVisible: boolean;

因为在父组件视图中我有：

[isProtocolloSideBarVisible]="isProtocolloSideBarVisible"

正如您在我的组件中看到的那样，我使用 @Input() 函数装饰器声明了从父控制器获取数据的 2 个变量：

@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,
    ) { }
    .......................................................
    .......................................................
    .......................................................
}

我有 2 个变量必须传递给子组件（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 工作正常）。

那么，怎么了？我错过了什么？我该如何解决这个问题？

Answer 1

请确保您正在使用的所有选择器的组件都在您的模块中声明（或在该模块导入的模块之一中）。 mail-detail-protocollo-sidebar 不是网络组件，这表明该组件尚未在应用程序的任何位置声明。

为什么我在尝试将 Angular 父组件的属性绑定到子组件时出现此错误？

Why am I obtaining this error trying to bind the properties from an Angular parent component to a child component?

javascript-framework

angular-components

angular

angular5