[英]Passing Data Between Two Components In Angular2 Produces Binding Error
我一直在寻找解决问题的方法,我知道它被问过很多次了,但是对我的问题没有用。
我有两个组成部分:
部门
全布局
整个问题试图使用@Inputs()
将数据从完整布局的组件传递到部门组件。
在下面,我将首先向您显示我的文件夹结构,然后向您显示我的代码。
结构 departments.component.ts
import {Component, OnInit, Input} from '@angular/core'; @Component({ selector: 'app-departments', templateUrl: './departments.component.html', inputs: ['valueToPass'] }) export class DepartmentsComponent implements OnInit { @Input() valueToPass; public _departments; constructor () { } ngOnInit() { console.log(this.valueToPass.nam); } }
departments.module.ts
// import{...}... // assume necessary imports above @NgModule({ imports: [ DepartmentsRoutingModule, CommonModule, MaterialModule.forRoot() ], declarations: [ DepartmentsComponent ] }) export class DepartmentsModule {}
full-layout.component.ts
import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-dashboard', templateUrl: './full-layout.component.html', }) export class FullLayoutComponent implements OnInit { public disabled:boolean = false; public status:{isopen:boolean} = {isopen: false}; constructor (){} ngOnInit (): void {} dropDownItems = [ { routerLink: '/departments', name: 'Artshums' }, { routerLink: '/components/social-buttons', name: 'Dentistry' }, { routerLink: '/components/cards', name: 'Law' }, { routerLink: '/components/forms', name: 'IOPPN' }, { routerLink: '/components/modals', name: 'LSM' }, { routerLink: '/departments', name: 'NMS' }, { routerLink: '/components/tables', name: 'Nursing' }, { routerLink: '/components/tabs', name: 'SSPP' }, { routerLink: '/components/tabs', name: 'Health' } ]; onClick(_container: HTMLElement) { //this.clickedElement = _container.innerText; //console.log(this.clickedElement); } }
full-layout.component.html
<ul class="nav-dropdown-items"> <li class="nav-item" *ngFor="let item of dropDownItems"> <a #clicked class="nav-link" routerLinkActive="active" [routerLink]="[item.routerLink]" (click)="onClick(clicked)"> <i class="icon-puzzle"></i>{{item.name}} <app-departments [valueToPass] = "item"></app-departments> </a> </li> </ul>
app.module.ts
// import {...}... // assume necessary imports @NgModule({ imports: [ BrowserModule, AppRoutingModule, DropdownModule.forRoot(), TabsModule.forRoot(), ChartsModule, MaterialModule.forRoot(), HttpModule, JsonpModule, DepartmentsModule ], declarations: [ AppComponent, FullLayoutComponent, SimpleLayoutComponent, NAV_DROPDOWN_DIRECTIVES, BreadcrumbsComponent, SIDEBAR_TOGGLE_DIRECTIVES, AsideToggleDirective ], providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }], bootstrap: [ AppComponent ] }) export class AppModule { }
我的问题就在这里。 当我运行该程序时,我收到绑定错误,并且我不确定为什么以及如何修复它。
无法绑定到“ valueToPass”,因为它不是“应用程序部门”的已知属性。
如果“ app-departments”是Angular组件,并且具有“ valueToPass”输入,则请验证它是否属于此模块。
如果“ app-departments”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。
一个小的帮助将不胜感激。
谢谢冠军!
当您像这样使用自定义选择器时: <app-departments>
,有时需要在“ @ NgModule.schemas”中添加“ CUSTOM_ELEMENTS_SCHEMA”,以避免错误。 通过在模块中添加“ CUSTOM_ELEMENTS_SCHEMA”,您基本上是在告诉Angular让您向应用添加自定义元素。
因此,在您的根模块中,将其添加到导入中:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
然后,在相同的根模块中,也将“方案”添加到“导入”下面,如下例所示:
@NgModule({
imports: [ RouterModule, CommonModule, FormsModule ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
另外,请注意:您似乎在这里输入错误-在“名称”中缺少“ e”:
的console.log(this.valueToPass.nam);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.