簡體   English   中英

在Angular2中的兩個組件之間傳遞數據會產生綁定錯誤

[英]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”,因為它不是“應用程序部門”的已知屬性。

  1. 如果“ app-departments”是Angular組件,並且具有“ valueToPass”輸入,則請驗證它是否屬於此模塊。

  2. 如果“ 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM