如何从angular2中的.ts文件访问HTML文件的方法? [英] How to access method from .ts file into html file in angular2?
问题描述
我是Angular2的初学者,我创建了一个模式对话框,这是我的HTML文件. index.html文件:-
I am beginners for Angular2, I created a modal dialog, here is my HTML file. index.html file:-
<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>
标签内显示.
After clicking on Open button I want to call show(){....}
that is inside .ts file
and I want to display inside <modal-boady></modal-body>
tag.
这是我的hello.component.ts文件:-
Here is my hello.component.ts file:-
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()=======");
}
}
我该怎么做?请引导我.
How could I do that? please guide me.
谢谢.
推荐答案
有几种方法可以在组件中获取元素句柄. 但是最容易理解的指南在这里.
There are several ways to get element handle in component. But most understandable guide is here.
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">×</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文件中的组件被引用为模态元素的句柄.
As you can see here, component is referenced the handle of modal element in .ts file.
这篇关于如何从angular2中的.ts文件访问HTML文件的方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!