正文 

当前位置： 首页 > 源码 >

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

     2023-02-22     102

关键词：

【中文标题】为啥在尝试将 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 组件，这表明该组件尚未在应用程序的任何地方声明。

【讨论】：

如何在 Angular 2 中调用其构造函数之前将数据发送或绑定到子组件？

】如何在Angular2中调用其构造函数之前将数据发送或绑定到子组件？【英文标题】：Howtosendorbinddatatochildcomponentbeforeit\'sconstructoriscalledinangular2?【发布时间】：2017-01-1608:37:31【问题描述】：我在Angular2中有父子组件，我想将数据绑... 查看详情

Vue + Nuxt：从父组件传递（绑定）动态数据到子组件的问题

】Vue+Nuxt：从父组件传递（绑定）动态数据到子组件的问题【英文标题】：Vue+Nuxt:problempassing(bind)dynamicdatafromparenttochildcomponent【发布时间】：2021-06-2712:05:08【问题描述】：我是Vue的新手，我正在努力通过道具将动态数据从父组件... 查看详情

从 Angular 父组件传递到子组件的数据在子组件中未定义

】从Angular父组件传递到子组件的数据在子组件中未定义【英文标题】：DatapassedfromanAngularparentcomponenttoachildcomponentisundefinedinchildcomponent【发布时间】：2021-03-0302:51:54【问题描述】：我有一个父组件将信息传递给子组件，但它是未... 查看详情

如何将 Angular 5 中的点击数据从父组件传递到子组件？

】如何将Angular5中的点击数据从父组件传递到子组件？【英文标题】：Howtopassdataonclickinangular5fromparentcomponenttochildcomponent?【发布时间】：2019-02-1003:51:28【问题描述】：我想将父组件的按钮单击数据传递给子组件，并将子组件呈现... 查看详情

如果数据属性在 VueJs 中从父组件传递到子组件，则无法将其作为对象进行操作

】如果数据属性在VueJs中从父组件传递到子组件，则无法将其作为对象进行操作【英文标题】：CannotmanipulatewithdatapropertyasanobjectifitispassedfromparenttochildcomponentinVueJs【发布时间】：2020-02-2211:25:09【问题描述】：我试图访问从父组件... 查看详情

数据未从Angular中的父组件传递到子组件

】数据未从Angular中的父组件传递到子组件【英文标题】：DatanotpassingtochildcomponentfromparentcomponentinAngular【发布时间】：2022-01-1917:58:37【问题描述】：我有几个复选框，我将这些复选框值推送到一个数组中。然后我尝试使用@Input装... 查看详情

Angular 2 单元测试数据从父组件传递到子组件

】Angular2单元测试数据从父组件传递到子组件【英文标题】：Angular2unittestingdatapassedfromparentcomponenttochildcomponent【发布时间】：2016-10-2506:03:02【问题描述】：我有一个关于我看到的（极少数）测试从父组件传递到子组件的数据示例... 查看详情

html将元素从父组件绑定到子组件(代码片段)

查看详情

通过属性将数组传递到Angular 1.5中的组件

】通过属性将数组传递到Angular1.5中的组件【英文标题】：PassinganarrayintoacomponentinAngular1.5throughanattribute【发布时间】：2017-04-1503:51:46【问题描述】：我正在尝试将数组从父控制器传递到子组件。&lt;plant-selectplants="head.permitte... 查看详情

自定义父子组件的数据双向绑定实现

...ld)将数据传递到子组件中问题：什么时候调用？（第一次尝试，新建时在提交表单时去拿child的数据，修改时在mouted钩子函数中传递child）踩坑：修改时，将组件的赋值都写在mouted钩子函数中，此时父组件中普通属性可以正常显... 查看详情

angular父子组件之间的传值

...的传值，是mvvm框架中必然绕不过去的话题，下面列举在angular中父子组件传值的各种方式。即带有@Input装饰器，如下面两种方式：父组件在引用子组件的标签的时候，通过[]符号将父组件的变量名赋值给该变量；子组件通过在变... 查看详情

为啥在 vue.js 中这些数据不能正确地从父组件传递到子组件？

】为啥在vue.js中这些数据不能正确地从父组件传递到子组件？【英文标题】：Whyisthisdatanotcorrectlypassingfromparentcomponenttochildcomponent,invue.js?为什么在vue.js中这些数据不能正确地从父组件传递到子组件？【发布时间】：2019-10-2205:01:57... 查看详情

如何在角度2中将数据从父构造函数传递到子组件

...【英文标题】：Howtopassdatafromparrentconstructortochildcomponentinangular2【发布时间】：2017-09-0309:21:35【问题描述】：我有一个Angular2页面，我需要使用来自外部API的相同数据数组来显示2个不同的组件。父组件是常规组件，子组件在其他... 查看详情

Angular 2 OnPush 动态组件的变化检测

】Angular2OnPush动态组件的变化检测【英文标题】：Angular2OnPushchangedetectionfordynamiccomponents【发布时间】：2017-06-0710:41:57【问题描述】：我有一个Angular组件，它在自身内部动态创建各种其他类型的组件。它通过OnChanges钩子将自己的... 查看详情

将 vue 中的数据从单个父组件传递到子组件

...vue，如下所示。我无法将数据注入到卡（子）组件中。我尝试在内部注入数据并在页面组件的数据函数中。页面.vue<templat 查看详情

将 vue 中的数据从单个父组件传递到子组件

...vue，如下所示。我无法将数据注入到卡（子）组件中。我尝试在内部注入数据并在页面组件的数据函数中。页面.vue<templat 查看详情

如何将道具从父组件渲染到子组件？

...child?【发布时间】：2021-07-2205:36:44【问题描述】：我正在尝试遍历数组并将标题和描述发送到子组件。但是，子组件无法识别我在父组件中分配给它的道具。News.js：constAllNews=[title:\'ReverseTheOnlineGamblingBan\',description:\' 查看详情

为啥我的输入变量属性未定义（Angular）

】为啥我的输入变量属性未定义（Angular）【英文标题】：Whyaremyinputvariablepropertiesundefined(Angular)为什么我的输入变量属性未定义（Angular）【发布时间】：2020-01-3022:59:26【问题描述】：我在应用程序组件中从我的服务中获取数据，... 查看详情