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

通过单击angular 7中的一行来显示和隐藏组件

在Angular 7中,通过单击一行来显示和隐藏组件可以通过以下步骤实现:

  1. 首先,在你的组件模板中,你需要为这一行添加一个点击事件。可以通过使用(click)指令来实现。例如:
代码语言:txt
复制
<div (click)="toggleComponent()">点击这一行</div>
  1. 在你的组件的类中,你需要实现toggleComponent()方法来切换组件的显示和隐藏状态。可以通过设置一个布尔型的变量来表示组件的状态。例如:
代码语言:txt
复制
export class YourComponent {
  isComponentVisible: boolean = false;

  toggleComponent() {
    this.isComponentVisible = !this.isComponentVisible;
  }
}
  1. 最后,在你的组件模板中,你需要使用Angular的条件指令(*ngIf)来根据组件的状态来控制组件的显示和隐藏。例如:
代码语言:txt
复制
<your-component *ngIf="isComponentVisible"></your-component>

通过上述步骤,当你单击这一行时,toggleComponent()方法会被调用,isComponentVisible变量的值会切换,从而控制组件的显示和隐藏。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云函数 SCF(Serverless Cloud Function):https://cloud.tencent.com/product/scf
  • 云开发 CloudBase:https://cloud.tencent.com/product/tcb
  • 云原生服务 TKE(Tencent Kubernetes Engine):https://cloud.tencent.com/product/tke
  • 云数据库 CDB(Cloud Database):https://cloud.tencent.com/product/cdb
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 英雄示例教程

在本教程最后,你应用可以做下面的工作: 使用Angular 内置指令(Angular directives)显示 / 隐藏元素,并显示英雄数据列表。...创建 Angular 组件Angular components)以显示英雄详情,并显示一个英雄数组。 为只读数据使用单向数据绑定。 添加可编辑字段,使用双向数据绑定更新模型。...创建共享服务管理这些英雄。 使用路由在不同视图及其组件之间导航。 你将学到足够 Angular 知识足够信心Angular 提供你所需支持。...你可以单击主面板上两个链接("Dashboard" "Heroes")在主面板视图英雄视图之间进行导航。...如果你单击  "Heroes(英雄列表)",引用将会将英雄以列表显示。 当你单击不同英雄名字时候,一个只读“微型详情视图”会在列表下方显示,以体现你选择。

1.4K30

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

英雄之旅应用程序涵盖了Angular核心基础。您将构建一个具有许多功能基本应用程序,您可以在完整数据驱动应用程序中找到许多功能:获取显示英雄列表,编辑所选英雄细节,以及浏览不同视图英雄数据。...您将学习以下内容: 使用内置指令显示隐藏元素并显示英雄数据列表。 创建组件显示英雄细节并显示一系列英雄。 对只读数据使用单向数据绑定。 添加可编辑字段以更新具有双向数据绑定模型。...将组件方法绑定到用户事件,如按键点击。 允许用户从主列表中选择一个英雄,并在详细信息视图中编辑该英雄。 用管道格式化数据。 创建一个共享服务组合英雄。 使用路由在不同视图及其组件之间导航。  ...你会学到Angular核心开始,并获得信心,Angular可以做任何你需要做事情。 您将在介绍性层面介绍很多方面,您会发现许多链接到更深入页面。...本教程提供了一个可视化想法,以仪表盘众多英勇英雄开始。 ? 你可以单击面板上边两个链接在“Dashboard”“Heroes”间切换。

1.3K20

AngularDart4.0 指南- 模板语法二 顶

单击按钮通过双向绑定更新AppComponent.fontSizePx。 修改后size值流向样式绑定,使显示文本变大或变小。...NgClass 您通常通过动态添加删除CSS类控制元素显示方式。 你可以绑定到ngClass同时添加或删除多个类。 class绑定是添加或删除单个类好方法。 <!...您不需要为您编写Angular组件添加值存取器,因为您可以将值事件属性命名为适合Angular基本双向绑定语法,并完全跳过NgModel。上面显示sizer是这种技术一个例子。...显示/隐藏不是一回事 您可以使用类或样式绑定控制元素可见性: <div [class.hidden]="!...警惕<em>隐藏</em>大型<em>组件</em>树; NgIf可能是更安全<em>的</em>选择。 警惕null ngIf指令通常用于防止null。 <em>显示</em>/<em>隐藏</em>是无用<em>的</em>。 如果嵌套表达式试图访问null属性,<em>Angular</em>会抛出一个错误。

29.9K20

AngularDart4.0 指南- 表单 顶

模板驱动形式 您可以通过使用本页中描述特定于表单指令技术在Angular模板语法中编写模板构建表单。 您也可以使用响应式(或模型驱动)方法构建表单。...添加自定义CSS提供视觉反馈。 显示隐藏验证错误消息。 使用ngSubmit处理表单提交。 禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。...您为modelpower定义了模拟数据。 顺便说一句,您可以注入数据服务获取保存真实数据,或者将这些属性作为输入输出(请参阅“模板语法”页面中输入输出属性)绑定到父组件。...显示错误消息。 您可以通过根据名称控制状态设置隐藏属性控制错误消息可见性。...输入控件(通过模板引用变量访问)valid 属性,用于检查控件有效性以及显示/隐藏错误消息。 NgForm.form有效性设置提交按钮启用状态。

17.5K30

AngularDart4.0 英雄之旅-教程-07路由 顶

在进行更改时,请通过重新加载浏览器窗口保持运行。 行动计划 计划如下: 将AppComponent转换为仅处理导航应用程序外壳程序。...相反,您将在自己页面上显示英雄细节,并按照您在仪表板中所做方式路由到它。 进行这些更改: 从模板最后一行删除元素。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。...通过调用路由器navigate()方法实现gotoDetail()。...仪表板英雄应显示在一排矩形。 为此目的,您已经收到了大约60行CSS,包括一些简单媒体查询响应式设计。 正如您现在所知,将CSS添加到组件样式元数据将会隐藏组件逻辑。

17.5K30

Angular 显示英雄列表

你可以定义属于特定组件私有样式,并且让组件所需一切(代码、HTML CSS)都放在一起。 这种方式让你在其它地方复用该组件更加容易,并且即使全局样式这里不一样,组件也仍然具有期望外观。...你可以在本指南底部查看最终代码中找到它们。 @Component 元数据中指定样式样式表都是局限于该组件。 ...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示在页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 根据条件包含或排除了一段 HTML。 你可以用 class 绑定切换 CSS 样式类。

4K30

Angular 显示英雄列表

你可以定义属于特定组件私有样式,并且让组件所需一切(代码、HTML CSS)都放在一起。 这种方式让你在其它地方复用该组件更加容易,并且即使全局样式这里不一样,组件也仍然具有期望外观。...你可以在本指南底部查看最终代码中找到它们。 @Component 元数据中指定样式样式表都是局限于该组件。 ...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄名字时候,有关你单击英雄详细信息就显示在页面的底部了。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 根据条件包含或排除了一段 HTML。 你可以用 class 绑定切换 CSS 样式类。

4.4K70

【17】进大厂必须掌握面试题-50个Angular面试

Angular中,什么是字符串插值? Angular字符串插值是一种特殊语法,它在双花括号 {{}}中使用模板表达式显示组件数据。它也称为小胡子语法。...使用它们,您可以轻松地组织数据,使数据仅在满足特定条件时才显示通过使用竖线字符|,将过滤器添加到表达式中,然后是过滤器。 14. AngularjQuery有什么区别?...在Angular中,服务是可替换对象,该对象使用依赖项注入连接在一起。通过将服务注册到要在其中执行模块中创建服务。基本上,您可以通过三种方式创建角度服务。..._template, {fromContext: 'John'}); } } 50.如何仅通过单击角形按钮即可隐藏HTML元素?...可以使用ng-hide指令与控制器一起轻松隐藏HTML元素,以在单击按钮时隐藏HTML元素。

41.2K51

AngularDart 4.0 高级-生命周期钩子 顶

开发人员可以通过Angular core库中实现一个或多个Lifecycle Hook界面挖掘该生命周期中关键时刻。 每个接口都有一个单一钩子方法,其名称是以ng开头接口名称。...第三方库可能也会实现它们钩子,以便让开发人员更好地控制这些库使用方式。 生命周期练习 通过组件一系列练习在根AppComponent控制下呈现演示生命周期挂钩。...看看Angular多久会调用这个钩子,并在更改日志后观察它。 AfterView 通过视图显示Angular意图。 演示ngAfterViewInitngAfterViewChecked挂钩。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...,只能通过使用@ViewChild注解属性查询子视图实现。

6.2K10

AngularDart4.0 指南 原

指南 了解Angular基础知识,如本地开发 安装, 显示数据接受用户输入,构建简单表单, 将应用程序服务注入到组件中,以及使用Angular模板语法。...教程 一步一步,沉浸式学习Angular方法,在应用程序上下文中介绍Angular主要功能与特点。 高级 Angular特征开发实践深入分析。 API 每个Angular详细细节。...如果对话框说Chromium想要使用您机密信息,请单击拒绝。 (您不应该使用Dartium进行通用浏览,Dartium不需要您信息运行此应用程序。)      ...按照开始,通过引导创建,运行修改AngularDart应用程序。     2.参加英雄之旅教程。      ...4.阅读数据显示以查看数据绑定是否在屏幕上放置组件属性值。     5.阅读用户输入,了解如何响应用户启动DOM事件。

2.7K20

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

对于具有集合控件(例如网格列),设计器允许您添加,删除修改单个成员。 在“属性”窗格中找到columns属性,然后单击属性编辑器右侧显示项目”按钮以显示Angular标记中定义八个列。...将鼠标悬停在单词“author”上,然后单击出现链接。 这将打开该列定义以进行编辑。 找到visible属性并将其更改为False。 现在重新绘制网格以显示author列已被隐藏。...例如,您可以通过添加适当类型新系列元素,轻松地将趋势线添加到图表中。 在“属性”窗格中向下滚动,找到系列属性,然后单击显示项目”按钮将其展开。...总结 WijmoJS VS Code设计器通过提供WYSIWYG设计界面协助前端开发工程师进行 Angular 项目开发,该设计器用于编辑代表WijmoJS控件标记。...此外,设计器还支持通过提供独立设计模式创建新WijmoJS标记,您可以在其中试验控件属性,子对象集合。 关于葡萄城 赋能开发者!

5.4K40

基于 Angular Material Data Grid 设计实现

说点题外话,开发一款插件最大难度不在于功能实现,而在于如何去设计插件。 什么是 Data Grid? Data Grid 本质上就是通过 数据+列定义+配置项 渲染表格插件。...column hiding(列显示隐藏) checkbox selection(数据选择) row selection(行选取,可多选) cell selection(单元格选取,暂时支持单选) expandable...模板是 angular 组件极其灵活一个功能。大部分优秀第三方组件都具有自定义模板能力,而在 Data Grid 中,模板更是一个不可或缺功能。...设置不可选取行方式有两种,一种是设置 checkbox 为 disabled,另一种是隐藏 checkbox。配置非常简单,只需要通过 rowSelectionFormatter 过滤数据即可。...官网示例:Column hiding & moving 列显示隐藏以及排序是非常常见需求,这类需求曾被产品经理折磨了无数次。

5K20

Angular2 之 结构型指令几个概念

结构型指令 结构型指令通过添加删除 DOM 元素来改变DOM布局。 我们经常看到内置结构型指令有:ngIf、ngSwitch、ngFor。 下面我们着重介绍ngIf。... 注意:这里是出现或者消失,并不是隐藏隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。 它仍然附加子啊它所属于DOM元素上,它仍然在监听事件。...angular会继续检查哪些能影响数据绑定变更。组件原本要做哪些事情仍然在进行!它还是占用着那么多资源。 另外一方面,重新显示这个组件会很快。...在Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段中。...简化这种事情。要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIfngFor —— 无论是写还是读。

3K20

AngularDart 4.0 高级-HTTP 客户端 顶

= null">{{errorMessage}} 模板ngFor指令显示heroes列表.列表下面是输入框Add Hero按钮,允许用户添加新英雄....获取数据 在之前示例中,应用通过返回服务中模拟英雄伪造与服务器交互: import 'dart:async'; import 'package:angular/angular.dart';...相反,您可以通过使用内存中Web API模拟服务器,这是实例(源代码)作用。...您必须将该字符串反序列化为对象,您可以通过调用dart:convert库中JSON.decode()方法执行此操作。...调用HeroService组件只需要heroes。 它与负责获取数据代码以及响应对象分离。 始终处理错误 处理I / O一个重要部分是通过准备捕捉它们并与它们做某些事情预测错误。

9.6K10

AngularDart 4.0 高级-路由概述 顶

概要 该应用程序具有配置路由。 外壳组件有一个RouterOutlet,它可以显示路由产生视图。 它具有RouterLink,用户可以通过路由点击进行导航。...以下是关键路由术语及其含义: 路由器组成部分 涵义 Router 显示活动URL应用程序组件。 管理从一个组件到下一个组件导航。...大多数路由由路径,路由名称组件类型组成。 RouterOutlet 指示路由应该显示视图指令()。 RouterLink 将可点击HTML元素绑定到路由指令。...Routing component 一个带有RouterOutletAngular组件,可根据路由导航显示视图。 示例应用程序 本指南介绍了多页面路由示例应用程序开发。...与英雄细节不同,当您键入更新时,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。

6.1K20

AngularDart4.0 指南- 用户输入 顶

等号左边(click)标识按钮点击事件作为绑定目标。 等号右边引号中文本是模板语句,它通过调用组件onClickMe()方法响应click事件。...上面的例子显示一行HTML,但是HTML属于一个更大组件: lib/src/click_me_component.dart (component) @Component( selector: '...每次调用之后,onKey()方法将输入框值附加到组件values属性,后跟一个分隔符(|)。 该模板使用Angular插值({{...}})显示值属性。...这打破了模板(用户看到组件(应用程序如何处理用户数据)之间关系分离。 下一节将介绍如何使用模板引用变量解决这个问题。...代码使用box变量获取输入元素值,并在标签之间进行插值显示。 模板是完全独立。 它不绑定到组件组件什么也不做。 在输入框中输入内容,然后观看每个按键显示更新。 ?

3.4K00

前端开发:这10个Chrome扩展你不得不知

这个工具在识别显示元素CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它所有CSS属性。您可以通过快捷键在CSSViewer窗体中轻松复制您选定元素样式。...Auury是由Rangle.io构建DevTool扩展,用于调试、分析优化Angular项目。...您可以检查React组件属性状态,随意更改属性状态,并查看所作变化在组件树中传递过程。 4. JSONView ? 浏览器通常不太擅长显示JSON数据。...我们通常选择在我们机器上安装不同浏览器,这样我们就可以在上面启动任何浏览器测试我们网站。 这个扩展可以为您做所有的事情。...ColorPick Eyedropper有一个浮动面板,它悬停在网页中元素上方,显示元素颜色。单击该元素会将所选元素颜色复制到剪贴板。

2.4K10

AngularDart4.0 英雄之旅-教程-04明细 顶

如果您结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口保持运行。...在显示数据Showing a list property with *ngFor部分阅读更多关于ngFor模板输入变量模板语法页ngFor部分 在节点内添加内容hero模板变量显示英雄属性...接下来,您将通过selectedHero组件属性将主链接到详细信息,该属性绑定到单击事件。...添加一个点击处理程序显示选定英雄  你不再需要hero属性,因为你不再显示一个英雄; 你正在显示一个英雄列表。 但是用户可以通过点击选择一个英雄。...您将Hero类移到lib / src下自己文件中。 你增加了选择英雄显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIfngFor。

3K30

Angular 6.x 快速入门

Angular 中,我们可以通过 Component 装饰器组件创建自定义组件。...基础知识 定义组件元信息 在 Angular 中,我们可以使用 Component 装饰器定义组件元信息: @Component({ selector: 'my-app', // 用于定义组件在...基础知识 ngIf 指令简介 该指令用于根据表达式值,动态控制模板内容显示隐藏。它与 AngularJS 1.x 中 ng-if 指令功能是等价。...组件,开发一个功能,即可以让用户动态控制技能信息显示隐藏。...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们演示如何通过表单为我们之前创建 UserComponent 组件,增加让用户自定义技能功能

14.1K20

Angular 主从组件

此刻,HeroesComponent 同时显示了英雄列表所选英雄详情。 把所有特性都放在同一个组件中,将会使应用“长大”后变得不可维护。...这个组件所做只是通过 hero 属性接收一个英雄对象,并显示它。 显示 HeroDetailComponent HeroesComponent 仍然是主从视图。...当用户从列表中选择了某个英雄时,父组件 HeroesComponent 将通过把要显示新英雄发送给子组件 HeroDetailComponent,控制子组件。...把原来 HeroesComponent 重构成两个组件带来了一些优点,无论是现在还是未来: 你通过缩减 HeroesComponent 职责简化了该组件。...本页中所提及代码如下:https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail 对应文件列表代码链接如下

1.2K40
领券