如何在角度2中访问从模块到组件的变量值？

Question

所以这是我的app.module.ts（我已注册NgxTypeaheadModule这样）

   import { NgxTypeaheadModule } from '../components/common/components/ngx-typeahead/ngx-typeahead'    
   imports: [NgxTypeaheadModule]

这是模块（ngxTypeahead.component.ts）

  

这是上面模块中的 ngxTypeahead.component.ts 文件

export class NgxTypeAheadComponent implements OnInit, OnDestroy {
      showSuggestions = false;

      somefunc(){
       showSuggestions = true;
   }

}

在上面的模块组件文件中，showSuggestions variable将根据用户点击而改变。

  

我在下面的组件文件中使用了上述模块（chat.component.ts）

 export class ChatComponent implements OnInit, OnDestroy {
       @ViewChild("input") input: ElementRef;

       onKey(event) {
            if (userInput.length == 0)) {

                this.input.showSuggestions = false;
            }
        }
    }

这是我的chatComponent.html文件

 <input #input [(ngModel)]="inputText" ngxTypeahead (keyup)="onKey($event)">

但如果我使用this.input.showSuggestions，我就会获得该值，但我收到此错误

那么将showSuggestions值从模块传递给我chat.component.ts的正确方法是什么？

任何建议或解决方案都将不胜感激!!

Answer 1

您可以@ViewChild("input") input: NgxTypeAheadComponent;获取组件实例而不是元素ref，但这是不好的做法和违反单向数据流的路径！也可以破坏变化检测，不适用于OnPush。

改为使用@Input：@Input() showSuggestions = false;和ChatComponent：

<input #input [(ngModel)]="inputText" ngxTypeahead 
(keyup)="onKey($event)" [showSuggestions]="showSuggestions">