Angular Can'；t绑定到'；valueToPass'；因为它不是'；t'的已知属性；应用程序部门'；

我对Angular2项目有异议。
我有两个组件，部门组件和完整布局组件。
我试图使用

Input（）

将数据从完整布局组件传递到部门

完整布局.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' }
  ];
}

<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>

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.name);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { MaterialModule } from '@angular/material';

import 'hammerjs';
// Routing Module
import { AppRoutingModule } from './app.routing';

// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
import {HttpModule, JsonpModule} from "@angular/http";
import {DepartmentsComponent} from "./components/departments/departments.component";
import {DepartmentsModule} from "./components/departments/departments.module";
@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,
    DepartmentsComponent
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

完整布局.component.html

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' }
  ];
}

<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>

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.name);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { MaterialModule } from '@angular/material';

import 'hammerjs';
// Routing Module
import { AppRoutingModule } from './app.routing';

// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
import {HttpModule, JsonpModule} from "@angular/http";
import {DepartmentsComponent} from "./components/departments/departments.component";
import {DepartmentsModule} from "./components/departments/departments.module";
@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,
    DepartmentsComponent
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

应用程序模块.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' }
  ];
}

<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>

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.name);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { MaterialModule } from '@angular/material';

import 'hammerjs';
// Routing Module
import { AppRoutingModule } from './app.routing';

// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
import {HttpModule, JsonpModule} from "@angular/http";
import {DepartmentsComponent} from "./components/departments/departments.component";
import {DepartmentsModule} from "./components/departments/departments.module";
@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,
    DepartmentsComponent
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

但我得到了以下错误：

无法绑定到“valueToPass”，因为它不是“app departments”的已知属性

• 如果“应用程序部门”是一个角度组件，并且具有“valueToPass”输入，则验证它是否是此模块的一部分
• 如果“app departments”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。（“cked）”>

---

如何解决此问题？

您是否已验证DepartmentsComponent是angular module的一部分（即在NgModule的

声明中），如错误消息所示？另外，为什么有
输入：['valueToPass']
？输入装饰器就足够了。我确实提到了。我得到这个错误DepartmentsComponent是两个模块声明的一部分：AppModule和DepartmentsModule@jbnizet然后从其中一个删除它。但是如果我确实从其中一个删除它。我得到这个错误：组件部门组件不是任何NgModule的一部分，或者该模块尚未导入到您的模块中@jbnizet则可能意味着您忘记将DepartmentsModule添加到AppModule的导入中，如错误消息所示。如果您发布了所有相关的代码和错误，那么回答您的问题就会容易得多。