在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）;