在Angular2中的两个组件之间传递数据产生绑定错误

Question

我一直在寻找这样来解决我的问题，我知道它被问了很多次，但它没有用于我的问题。

我有两个组成部分：

• 部门

• 全布局

整个问题尝试使用从全布局的构成数据传递给部门组成@Inputs()。

下面我会告诉你我的文件夹结构，然后是我的代码。

结构

Department Folder Structure

Layout-Folder Structure

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'的已知属性。

1. 如果'app-departments'是一个Angular组件并且它有'valueToPass'输入，那么请验证它是否为该模块的一部分。

2. 如果'app-departments'是一个Web组件，然后将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas'以禁止此消息。

一个小小的帮助将高度赞赏它。

谢谢香榭丽舍！

Answer 1

当你使用像这样的自定义选择器：<app-departments>时，有时需要将“CUSTOM_ELEMENTS_SCHEMA”添加到“@ NgModule.schemas”以避免错误。通过在您的模块中添加“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）;