首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我单击按钮时,我的内容会出现在Angular 2应用程序的同一页上

当您单击按钮时,您可以通过以下步骤将内容显示在Angular 2应用程序的同一页上:

  1. 在Angular 2应用程序中,首先需要创建一个按钮组件。您可以使用Angular的组件装饰器来定义一个组件,并在模板中添加一个按钮元素。
代码语言:typescript
复制
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 = "这是要显示的内容";
  }
}
  1. 在您的应用程序的主模块中引入并声明该按钮组件。
代码语言:typescript
复制
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 { }
  1. 在应用程序的HTML模板中使用该按钮组件。
代码语言:html
复制
<app-button></app-button>
  1. 当您单击按钮时,showContent()方法将被调用,并设置content变量的值。然后,使用Angular的结构指令*ngIf来根据content变量的值来决定是否显示内容。

这样,当您单击按钮时,内容将出现在Angular 2应用程序的同一页上。

请注意,这只是一个简单的示例,您可以根据您的实际需求进行修改和扩展。如果您想了解更多关于Angular 2的信息,可以参考腾讯云的Angular产品文档:Angular产品文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-路由概述 顶

大部分内容都是准确,但样本仍在改进和增强。 欢迎反馈。 当用户执行应用程序任务Angular路由器支持从一个视图导航到下一个视图。...它可以将浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以将路由器绑定到页面上链接,并在用户单击链接导航到适当应用程序视图。...如果您点击了浏览器后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular应用程序像正常网页导航一样更新浏览器历史。 现在点击危机中心链接查看正在进行危机列表。 ?...选择危机,应用程序会将您带入危机编辑屏幕。 危机详情显示在列表下方同一面上子视图中。 改变危机名称。 请注意危机列表中相应名称不会更改。 ?...与英雄细节不同,当您键入更新,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮

6.1K20

PowerBI中书签和导航,如何选择呢?

在2020 年 3 月更新中,按钮有了一个名为"导航"新功能: ? 那么我们该如何在“导航”和“书签”之间做出选择呢?...原因是在桌面应用程序中,单击意味着选择项目,并在编辑器中对该项目应用一些格式或其他配置。在 Power BI 网站或移动应用程序中,用户只需只需单击一次左键即可。...缺点是: 导航只限于按钮,不能使用图片/形状来跳转,如果一定要使用图片或形状,那么需要在图片/形状再放一个按钮,很麻烦 2.多个可视化对象与多个隐藏显示组合 很多时候不得不去处理这样一些报告。...所以我们来总结一下在这两者之间进行选择困扰: 页面导航目前只支持按钮,那么如果你想用图片或者形状来导航,你会选择在图片覆盖一个空白按钮来伪装,还是直接创建一个书签?...在很长一段时间里,喜欢用书签,但是当我现在做一些数据量比较小项目导航做起来的确更加便利。不过,书签给用户的如丝般顺滑体验,是导航无论如何也不能给

6.9K31
  • AngularDart4.0 英雄之旅-教程-01介绍

    码云项目:https://gitee.com/scooplolwiki/toh-6 本教程宏伟计划是构建一个应用程序,帮助人力资源管理其稳定英雄。...你可以单击面板上边两个链接在“Dashboard”和“Heroes”间切换。 当你单击面板英雄“Magneta”,路由将打开英雄“Magneta”视图,并且你可以修改名字。 ?...点击"Back"将返回到面板,顶部链接带你进入不同主视图,单击“Heroes”,应用将显示“Heroes”主列表视图。 ? 当您单击不同英雄名称,列表下面的只读迷你细节反映了新选择。...您可以单击“查看详细信息”按钮,获取所选英雄可编辑详细信息。 下图捕获所有导航选项。 ? 应用动图 ? 接下来 您将一步一步地构建“英雄之旅”应用程序。...每一步都有一个要求,你可能会遇到许多应用程序。 一切都是有根据,一路,您将会熟悉Angular许多核心基础知识。

    1.3K20

    AngularDart 4.0 高级-HTTP 客户端 顶

    Dart网络应用程序通常使用XMLHttpRequest(XHR)API执行此操作,使用dart:html库中HttpRequest或更高级别的API(例如http包提供内容)。...试试主持两个演示实例(查看源代码)。 提供HTTP服务 此demo使用了http包Client接口....一个模板引用变量, newHeroName, 赋予(click)事件绑定存取输入框值. 当用户单击按钮, 单击处理程序传递输入值到addHero()方法. 单击处理程序清空输入框....处理错误一种方法是将错误消息传回组件,以便呈现给用户,但前提是该消息是用户可以理解并采取行动内容。...考虑到安全因素, 浏览器阻止XHR访问远程服务器(与web不在同一个源). 源 是URI 方案, 主机名, 和端口号组成. 被称作same-origin方针.

    9.7K10

    教程|在 Angular 4 中加载功能模块(

    过去几年来,Angular 作为单 Web 应用程序开发框架变得越来越流行。...请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发开发人员。 Angular功能模块 单 Web 应用程序在启动仅呈现一个 HTML 页面。...您会看到该应用程序正在运行。如果单击 Home 图标,将会看到 Markets 功能区域: 图 2....Markets 用户界面 如果单击 Sports,将会看到 Sports 功能区域: 图 3. Sports 用户界面 现在转到 fm/src/app 目录中应用程序代码。这是该目录快照。...在 Windows 机器,按下 Fn+F12。在 Mac 机器,按下 Command->Option->i。现在您会看到 Chrome 开发人员工具 GUI。

    2.2K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    使用此版本更新web / main.dart,该版本使用模拟服务:web/main.dart (v2) import 'package:angular/angular.dart'; import 'package...现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试在英雄详情视图中编辑英雄名字。 当你输入时,英雄名字在视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...当应用程序使用模拟英雄列表,更新直接应用于单个应用程序范围共享列表中英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮现在应该继续进行更改。 添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...()方法之外,删除按钮单击处理程序代码会停止单击事件传播 - 您不希望触发 click处理程序,因为这样做会选择用户将要删除英雄 。

    11K30

    如何为Ubuntu Dock图标启用最小化点击功能?

    如果各自应用程序已经处于焦点,则不会最小化。它会保持静止。您需要使用最小化按钮来最小化它,以查看背景其他窗口。 如果运行同一应用程序多个窗口,您将看到所有窗口预览。...单击任何窗口即可将其向前移动。 这是Ubuntu Dock默认行为。在其他桌面环境中,例如Deepin,当我单击启动器图标,如果应用程序已经在运行,则相应应用程序将最小化停靠。...Ubuntu Dock图标的“点击最小化”功能在Ubuntu Dock默认没有启用。已经习惯了这个特性,想让它回到我Ubuntu 18.04桌面。...首次启动,您将收到以下警告消息。 点击“我会小心。”按钮继续。 单击右上角搜索按钮,搜索“dash-to-dock”。 您将看到以下结果。...现在,通过单击任何正在运行应用程序图标来验证是否启用了“最小化点击”功能,您将看到相应应用程序被自动最小化以停靠。

    1.7K10

    构建现代Web应用时究竟是选择传统web应用还是SPA

    在大前端盛行今天,似乎前后端分离开发模式才是大势所趋,而SPA概念更是应运而生。现在随便构建一个web应用程序如果你不是使用SPA的话,就会感觉有点low,但是真的是这样吗?...同样,一般而言,博客或内容管理系统中面向公众应用程序主要包含内容与客户端行为关系不大。...何时选择 SPA 以下内容详细介绍何时为 Web 应用选择单应用程序开发样式。...SPA 很少需要重新加载整个页面,因此加载速度更快,可在后台提取数据,并且对单个用户操作响应更快。 SPA 支持增量更新,可保存尚未完成窗体或文档,而无需用户单击按钮提交窗体。...SPA 还应允许用户使用浏览器后退和前进按钮寻找用户意料之中结果。

    1.5K30

    构建具有用户身份认证 Ionic 应用

    喜欢使用 Ionic,发现使用 Ionic 移植现有的应用程序更多就是修改 HTML 和调整 CSS。 Ionic 2 在 一月份发布, 可以使用 Angular 开发 Ionic 应用。...检查 CORS 和重定向 origin 类型。 ? 现在登录可以正常工作了,但是 UI 界面并没有提示。在首页右上角添加一个 "Logout" 按钮。...当出现提示输入 "y",按回车。 TIP: 现在模拟器中运行应用程序最大问题是键盘很难弹出。...为了解决这一问题,当我需要在输入框输入文本使用 Hardware > Keyboard > Toggle Software Keyboard 。 如果你在登录输入凭证,可能什么也不会发生。...image.png 使用这项技术好处就是 Okta 登录具有“记住”和“忘记密码”功能,所以不需要自己编写代码。 为了将 app 部署到 iPhone,首先将手机插到电脑

    23.2K50

    构建具有用户身份认证 Ionic 应用

    喜欢使用 Ionic,发现使用 Ionic 移植现有的应用程序更多就是修改 HTML 和调整 CSS。 Ionic 2 在 一月份发布, 可以使用 Angular 开发 Ionic 应用。...检查 CORS 和重定向 origin 类型。 ? 现在登录可以正常工作了,但是 UI 界面并没有提示。在首页右上角添加一个 "Logout" 按钮。...当出现提示输入 "y",按回车。 TIP: 现在模拟器中运行应用程序最大问题是键盘很难弹出。...为了解决这一问题,当我需要在输入框输入文本使用 Hardware > Keyboard > Toggle Software Keyboard 。 如果你在登录输入凭证,可能什么也不会发生。...使用这项技术好处就是 Okta 登录具有“记住”和“忘记密码”功能,所以不需要自己编写代码。 为了将 app 部署到 iPhone,首先将手机插到电脑

    23.8K00

    Web 应用开发进化论

    有了服务器端逻辑,开发人员就可以处理来自用户读写请求。如果用户想要创建博客文章(写入操作),用户必须在浏览器中编写博客文章并单击“保存”按钮内容发送到运行在 Web 服务器服务端逻辑。...Knockout.js、Ember.js 和 Angular.js 这些都是早期用 JavaScript 编写单应用程序库/框架;而 React.js 和 Vue.js 是后来才发布。...现在,当用户开始与页面及其数据进行交互,每个文章按钮允许用户单独删除它们。当用户单击删除按钮时会发生什么?...用户单击删除按钮,该按钮会向应用程序服务器发送一个请求,其中包含博客文章标识符和删除它指令(通常一个 HTTP DELETE 就足够了)。...使用另一个后端(Backend 2后端应用程序(Backend 1)成为服务器应用程序(Backend 2客户端应用程序(Backend 1)。

    4.2K10

    如何使用纯前端控件集 WijmoJS 中可视化在线设计器

    开始使用WijmoJS Designer 设计器可视化界面首次打开,该设计图面默认自带一个带有实时样本数据纯前端FlexGrid表格控件,要删除它,请单击“编辑”工具栏“删除”按钮。...用户可通过打开工具箱并将InputDateTime控件添加到设计图面,单击“编辑”工具栏移”按钮以交换两个控件位置。...如果要保存设计器布局以供将来使用,请使用主工具栏“保存”按钮将当前状态写入JSON文件,然后使用主工具栏“打开”按钮重新加载所选文件内容。...在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格,然后单击出现链接。...,以便您可以了解在应用程序中使用实际数据进行部署实际图表外观。

    5.9K20

    React 困境与未来,何时迎来自己Angular.js 时刻”?

    仅仅两年之后,开发团队又推出了 Angular 2,基于新范式对原始库进行全面重写。但包括自己在内,不少开发者都不愿修改现有应用来适应新设计思路。...难道说 Angular.js 到 Angular 2 故事又要重演?React 是否正在重蹈前辈覆辙? 注意:本文主要讨论 React 和 Next.js 团队引入新功能。...如果大家希望创建一个按钮来启动 POST 操作,现在需要将其包含在表单内并使用服务端操作,也就是使用带有 use server 函数: export function AddToFavoritesButton...‘ 现有应用不受影响 与 Angular.js 到 Angular 2 过渡不同,React 服务端组件推出并不算是重大变化。...如果一款工具为同一种功能提供两种截然不同实现方法,但它真的还是同一款工具吗? 所以对于“React 过度膨胀野心是否在损害社区”,答案是肯定

    25210

    快速上手最新 Vue CLI 3

    刚打开看起来像这样: ? 要创建新项目,请单击create按钮,然后在同一界面中查看打开文件管理器。...浏览(项目)文件,你会注意到先前创建 Vue 项目上有 Vue 符号(表示它们是Vue项目)。选择要在其中创建新程序文件夹,然后单击页面上create new project here按钮。...某些插件附带了导致其安装后续提示。在我看来,认为在新 CLI 中实现插件概念受到了 Angular CLI 启发。...现在可以用名为instant prototyping新 Vue CLI 功能来实现了,它抽象了在已保存.vue文件创建单个组件所需所有配置。...在撰写本文,GUI 工具还无法通过 GUI 工具即时原型设计在单个组件创建或运行任务,但可以在 CLI 完成。希望本指南能够对你有所有帮助,编码愉快!

    87030

    如何在Ubuntu 16.04使用Alerta监视Zabbix警报

    我们在服务器/api端点提供Alerta ServerAPI,并为来自同一Web控制台提供静态内容,这样我们就可以避免CORS或HTTPS混合内容错误问题。...输入需要访问API应用程序名称。在本教程中,输入zabix。然后从下拉列表中选择读写,并单击“ 创建新API密钥”按钮。将创建新密钥,您将看到其详细信息。复制此密钥; 你以后会需要。...这次你会看到“请登录以继续”消息。单击“ 登录”按钮登录,系统将要求您允许应用程序访问您GitHub帐户。 现在我们可以运行一个简单测试来检查Alerta是否已设置并正常运行。...然后验证用户配置并单击“ 更新”按钮保存设置。 现在配置一个动作来发送消息。在主菜单中选择Configuration,然后选择Actions。单击“ 创建操作”按钮。...接下来,通过单击“ 操作”字段中“ 新建”来创建新操作。对于“ 操作类型”,从下拉框中选择“ 发送恢复消息 ”。 单击“ 添加”按钮完成配置。 Zabbix现在已经可以向Alerta发送警报。

    4.2K40

    Kali Linux Web渗透测试手册(第二版) - 4.8- 执行跨站点请求伪造攻击

    实战演练 我们首先需要分析我们想要强迫受害者提出要求。为此,我们需要Burp Suite或浏览器中配置其他代理: 1. 以任何用户身份登录BodgeIt,然后单击用户名转到配置文件。 2....现在,在与登录会话相同浏览器中加载此文件: ? 5. 单击“提交”,您将被重定向到用户个人资料页面。 它会告诉您密码已成功更新。 6....虽然这证明了这一点,但外部站点(或本例中本地HTML页面)可以在应用程序执行密码更改请求。用户仍然不太可能点击“提交”按钮。 我们可以自动执行该操作并隐藏输入字段,以便隐藏恶意内容。...我们可以通过在同一面内不可见框架中加载响应来进一步改进攻击页面。 有很多方法可以做到这一点; 快速而肮脏是为框架设置尺寸0。...当我们在应用程序中有活动会话同一浏览器中加载页面,即使它是不同选项卡或窗口,并且此页面向启动会话域发出请求,浏览器将自动附加会话该请求cookie。

    2.1K20

    HTML注入综合指南

    * *现在,当受害者浏览该特定网页,他发现可以使用那些***“免费电影票”了。***当他单击,他会看到该应用程序登录屏幕,这只是攻击者精心制作***“ HTML表单”。...align=center> [图片] 从下图可以看到,当我单击“提交”按钮...** [图片] 在“ Repeater”选项卡中,当我单击**“ Go”**按钮以检查生成**响应时,**发现HTML实体已在此处**解码**为**HTML**: [图片] 因此,我处理了完整...[图片] 反映HTML当前URL *网页没有输入字段,Web应用程序是否容易受到HTML注入攻击?... 单击**前进**按钮以在浏览器检查结果。 [图片] 从下图可以看到,只需将所需HTML代码注入Web应用程序URL中,我们就成功地破坏了网站形象。

    3.9K52
    领券