如何将.ts文件中的方法访问到angular2中的html文件？答案

【问题标题】：How to access method from .ts file into html file in angular2?如何将.ts文件中的方法访问到angular2中的html文件？
【发布时间】：2017-04-17 12:32:46
【问题描述】：

我是 Angular2 的初学者，我创建了一个模态对话框，这是我的 HTML 文件。 index.html 文件：-

 <button type="button" class="btn btn-default"                    (click)="modal.open()">Open</button>
    
        <modal #modal>
        <modal-header [show-close]="true">
            <h4 class="modal-title">I'm a modal!</h4>
        </modal-header>
        <modal-body>

        Here i want to call show() method from .ts file.
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
    </modal>

点击打开按钮后，我想调用 .ts 文件中的show(){....} 我想在<modal-boady></modal-body>标签内显示。

这是我的 hello.component.ts 文件：-

import {Component, View} from "angular2/core";
@Component({
  selector: 'my-app',
  templateUrl: './index.html'
  })
  
  export class  HeapMemoryGraphComponent implements OnInit {
   constructor(){}
   ngOnInit() {
    this.show();
   }
   show(){
    console.log("=====show()=======");
   }
  }

我怎么能这样做？请指导我。

谢谢。

【问题讨论】：

你能把剩下的相关代码贴出来吗？
嘿danimal，我更新了我的问题。请问你能看到这个吗？

标签： angular angular2-modal

【解决方案1】：

有几种方法可以在组件中获取元素句柄。但最容易理解的指南在这里。

http://valor-software.com/ngx-bootstrap/#/modals

请在那里查看子模态。

<button type="button" class="btn btn-primary" (click)="showChildModal()">Open child modal</button>
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Child modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        I am a child modal, opened from parent component!
      </div>
    </div>
  </div>
</div>

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-child',
  templateUrl: './child.html'
})
export class DemoModalChildComponent {
  @ViewChild('childModal') public childModal:ModalDirective;

  public showChildModal():void {
    this.childModal.show();
  }

  public hideChildModal():void {
    this.childModal.hide();
  }
}

正如您在此处看到的，组件引用了 .ts 文件中模态元素的句柄。

【讨论】：

它给出错误：- 模板解析错误：未处理的承诺拒绝：模板解析错误：没有将“exportAs”设置为“bs-modal”的指令（“
] #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLa"）：

【解决方案2】：

html 文件：

<input class="search-text" type="text" (keyup)="onKeyUp($event)">
<button type="button" [disabled]="!isValidForSearch()"  class="btn btn-primary" (click)="getUsers()">Search</button>

ts 文件：

//Here I am getting the value entered in the text box
onKeyUp(event){
   this.searchText = event.target.value;
}

//Here I am enabling the button if user enters any text in the search text box other wise it will be disabled 
isValidForSearch() {
   var isValid = false;
   if(this.searchText != '' && this.searchText != undefined) {
       isValid = true;
   }
   return isValid;  
}

希望对你有所帮助。

【讨论】：