当您单击按钮时,您可以通过以下步骤将内容显示在Angular 2应用程序的同一页上:
import { Component } from '@angular/core';
@Component({
selector: 'app-button',
template: `
<button (click)="showContent()">点击我显示内容</button>
<div *ngIf="content">{{ content }}</div>
`
})
export class ButtonComponent {
content: string;
showContent() {
// 在这里设置要显示的内容
this.content = "这是要显示的内容";
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonComponent } from './button.component';
@NgModule({
imports: [BrowserModule],
declarations: [ButtonComponent],
bootstrap: [ButtonComponent]
})
export class AppModule { }
<app-button></app-button>
showContent()
方法将被调用,并设置content
变量的值。然后,使用Angular的结构指令*ngIf
来根据content
变量的值来决定是否显示内容。这样,当您单击按钮时,内容将出现在Angular 2应用程序的同一页上。
请注意,这只是一个简单的示例,您可以根据您的实际需求进行修改和扩展。如果您想了解更多关于Angular 2的信息,可以参考腾讯云的Angular产品文档:Angular产品文档。
领取专属 10元无门槛券
手把手带您无忧上云