如何在点击事件中调用Angular组件[Angular] [英] How to call an Angular component on click event [Angular]
本文介绍了如何在点击事件中调用Angular组件[Angular]的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不是Angular的专家.我也从互联网上获得了一些答案.特别是此.我有一个按钮,可以在其中调用用户定义的方法 onPress
.
I'm not an expert in Angular. I followed some answers from internet also. Specially this. I've a button from where I want to call a user defined method onPress
.
app.component.html
<div class="dls-menu-item" style="float: right;">
<button (click)="onPress()"></button>
</div>
<div id="comp-render">
<-----Here i want that component to be rendered
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
...
})
export class AnalyticsComponent implements OnInit {
constructor() {}
ngOnInit() {}
onPress() {
console.log("clicked");
document.querySelector('#comp-render').innerHTML='<object type="text/html" data="mycomp.html" ></object>';
}
}
mycomp.html 所在的位置:
<h1>Hello</h1>
<p>This is a custom component.</p>
<button>Click</button>
任何人都可以告诉我该怎么做.
Can anyone please tell me how to do it.
推荐答案
<div class="dls-menu-item" style="float: right;">
<button (click)="onPress()"></button>
</div>
<div id="comp-render" *ngIf="display">
<mycomp></mycomp>
</div>
app.component.ts文件
...
display = false;
onPress() {
this.display = true;
/*if you want the component to show and hide on click pressed, use
use this line
this.display = !this.display;*/
}
工作代码:
https://stackblitz.com/edit/angular-d21pkn
这篇关于如何在点击事件中调用Angular组件[Angular]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文