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

Posted 2023-02-22

【中文标题】为啥在尝试将 Angular 父组件的属性绑定到子组件时出现此错误？

【英文标题】：Why am I obtaining this error trying to bind the properties from an Angular parent component to a child component?为什么在尝试将 Angular 父组件的属性绑定到子组件时出现此错误？

【发布时间】：2019-04-15 12:32:35

【问题描述】：

我是 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 个父组件属性 selectedMail 的值传递给子组件（具有 ma​​il-detail-protocollo-sidebar 作为选择器的组件） > 和 isProtocolloSideBarVisible （这与它在第一个侧边栏中所做的相同）。这里唯一改变的是 isProtocolloSideBarVisible 变量的名称（具有完全相同的逻辑）

这是我的 MailDetailProtocolloSidebarComponent 组件类的代码（与具有 ma​​il-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"

正如您在我的组件中看到的，我使用 @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. ("

我不明白为什么，因为在我看来，我正在使用与第一个工作子组件相同的逻辑（ma​​il-detail-sidebar 工作正常）。

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

【问题讨论】：

请出示您的@NgModule声明。

【参考方案1】：

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