Angular2の2つのコンポーネント間でデータを渡すとバインディングエラーが発生する

Question

問題を解決するためにSOを検索しています。 を使用して部署コンポーネントにフルレイアウト・コンポーネントからのデータを渡すために全体の問題がしようとしている

• 部門

• フルレイアウト：

  は、私は2つのコンポーネントを持っています@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 { }

  私の問題はここにあります。私はこのプログラムを実行すると、私はバインディングエラーを取得し、私はなぜ、どのようにそれを修正するかわからない。

  'app-departments'の既知のプロパティではないため、 'valueToPass'にバインドできません。

  1. 'app-departments'がAngularコンポーネントで、 'valueToPass'入力がある場合は、このモジュールの一部であることを確認してください。

  2. 'app-departments'がWebコンポーネントの場合は、このコンポーネントの '@ NgModule.schemas'に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを表示しないようにします。

  小さなヘルプは非常に高く評価されます。

  ありがとうございました！

Answer 1

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

また、1つのノートは：あなたがここにタイプミスを持っているように見えます - "名前" に "e" を行方不明：

にconsole.log（this.valueToPass.nam）。