Question

我一直在寻找解决我的问题的方法，我知道它被问了很多次，但对我的问题毫无用处。

我有两个组成部分：

部门
全面布局

整个问题是尝试使用 @Inputs() 将数据从完整布局组件传递到部门组件。

下面我将首先显示我的文件夹结构，然后显示我的代码。

结构

Department Folder Structure

Layout-Folder Structure

departments.component.ts

＆＃13;

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

＆＃13;

departments.module.ts

＆＃13;

// import{...}...
// assume necessary imports above

@NgModule({
  imports: [
    DepartmentsRoutingModule,
    CommonModule,
    MaterialModule.forRoot()
  ],
  declarations: [ DepartmentsComponent ]
})
export class DepartmentsModule {}

＆＃13;

full-layout.component.ts

＆＃13;

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

＆＃13;

full-layout.component.html

＆＃13;

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

＆＃13;

app.module.ts

＆＃13;

// 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 { }

＆＃13;

我的问题在于此。当我运行这个程序时，我得到了绑定错误，我不知道为什么以及如何解决它。

无法绑定到＆＃39; valueToPass＆＃39;因为它不是“应用程序部门”的已知属性。

如果＆＃39; app-departments＆＃39;是一个角色组件，它具有“价值托盘”和＃39;输入，然后验证它是否是该模块的一部分。
如果＆＃39; app-departments＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止显示此消息。

小小的帮助将受到高度赞赏。

感谢香榭丽舍大街！

Answer 1

当您使用自定义选择器时，例如：<app-departments>，您有时需要将“CUSTOM_ELEMENTS_SCHEMA”添加到“@ NgModule.schemas”以避免错误。通过在模块中添加“CUSTOM_ELEMENTS_SCHEMA”，您基本上可以告诉Angular允许您向应用添加自定义元素。

因此，在您的根模块中，将其添加到imports：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

然后，在同一个根模块中，在“imports”下面添加“schemas”，如下例所示：

@NgModule({
    imports: [ RouterModule, CommonModule, FormsModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

另外，还有一个注意事项：看起来你这里有一个拼写错误 - 在“名字”中缺少“e”：

的console.log（this.valueToPass.nam）;

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

1 个答案: