Angular 5 - onclick 事件将组件附加到 div 中 [英] Angular 5 - onclick event append component into div
本文介绍了Angular 5 - onclick 事件将组件附加到 div 中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Angular 5,我有这个:
//app.component.ts从@angular/core"导入{组件};@成分({选择器:'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {appendToContainer() {//做这里的事情//将 PanelComponent 附加到 div#container}}
现在是 app.component.html
//app.component.html<button (click)="appendToContainer()"></button><div id="容器"></div>
最后我有一个简单的组件
//panel.component.html<div class="panelComponent">这是一个面板组件html
我想要做的是,每次点击 app.component.html 上的按钮时,我都需要将 panel.component 附加到 app.component.html 中
我该怎么做?
解决方案
你可以使用一个 *ngFor 和一个变量来实现你想要的
//在你的组件中数量:数量=0//你喜欢html<button (click)="num++"></button>//我们创建一个on fly"数组并切片以仅获取num"项<div *ngFor="let item in [0,1,2,3,4,5,6,7,8,9].slice(0,num)" class="panelComponent">这是一个面板组件html
I am using Angular 5 and I have this:
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
appendToContainer() {
// Do the stuff here
// Append PanelComponent into div#container
}
}
Now the app.component.html
// app.component.html
<button (click)="appendToContainer()"></button>
<div id="container"></div>
and finally I have a simple component
// panel.component.html
<div class="panelComponent">
This is a panel Component html
</div>
What I want to do is that everytime the button on app.component.html is click I need a panel.component appended into app.component.html
How can I do this?
解决方案
You can use a *ngFor and a variable to achieve you want
//In your component
num:number=0
//You html like
<button (click)="num++"></button>
//we create a array "on fly" and slice to get only a "num" items
<div *ngFor="let item in [0,1,2,3,4,5,6,7,8,9].slice(0,num)" class="panelComponent">
This is a panel Component html
</div>
这篇关于Angular 5 - onclick 事件将组件附加到 div 中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文