首页
学习
活动
专区
圈层
工具
发布

ng-content 中隐藏的内容

有时你只需要将其包装在额外的容器中即可应用 ngIf 或 ngSwitch。无论什么原因,通常情况下,你的内部组件不是包装器的直接子节点。...为什么不按照我们的预期运行? The explanation 不会 “产生” 内容,它只是投影现有的内容。...> 如果第三方库能够控制 counter 组件的生命周期,我将无法知道它被实例化了多少次。...性能的原因更为重要。因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。...The solution 为了让包装器能够控制其子元素的实例化,我们可以通过两种方式完成:在我们的内容周围使用 元素,或者使用带有 “*” 语法的结构指令。

3.4K30

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

作者|接灰的电子产品 原文|http://www.jianshu.com/p/925adede7c60 为什么要做响应式编程? 我给出的答案很简单:响应式编程可以让你把程序逻辑想的很清楚。...3、填年龄时,出生日期随之变化,因为无法精确,所以只需精确到选择的单位即可。...这个 valueChanges 返回的其实就是一个 Observable ,见下面的 TypeScript 定义: 既然我们得到了这个原始数据流,剩下的工作就比较简单了。...Async 管道 到目前为止,我们还没有进行对 Observable 的订阅,如果不订阅的话,写的再漂亮的语句也不会执行的。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。

5.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    事件绑定语法由等号左边括号内的目标事件名称和右边带引号的模板语句组成。...事件发生时,处理程序执行模板语句。 模板语句通常包含一个接收器,它响应事件执行一个动作,例如将HTML控件的值存储到模型中。...模板语句有附作用 deleteHero方法有一个附作用:删除一个英雄。 模板语句的附作用不只是好的,但可预期。 删除英雄更新模型,可能会触发其他更改,包括查询并保存到远程服务器。...NgFor:为列表中的每个项目重复一个模板。 NgSwitch:只显示多个可能元素中的一个。 NgIf  您可以通过向该元素应用NgIf指令(称为宿主元素)来添加或移除DOM中的元素。...警惕隐藏大型组件树; NgIf可能是更安全的选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用的。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。

    32.9K20

    Angular Material 的设计之美

    不会让开发人员感到困惑的简单 API。 在各种各样没有 bug 的用例中按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范的范围内进行定制。...代码简洁,文档友好,可以作为 Angular 开发人员的一个例子。 Material Design 作为一个非常流行的设计语言,它有多个版本的实现。...DOM 结构,这种简洁的结构(CDKTable 的结构也是如此)确实让人不适应,甚至有一些担忧,遇到复杂的需求会不会吃瘪。...这让我想起前端流行的一句话,“凡事能用 CSS 完成的就不要用 JS”,这也是我不建议大家用 Less 的原因之一。 ng-matero 的表格示例是最简单的业务表格,可以参考其实现方法。...任何组件库都无法满足所有业务需求,如果你无法在 Angular Material 中找到可用的组件,你可以尝试第三方组件,或者可以将 ng-zorro-antd 按模块单独引入。

    5.8K30

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

    /app_component.dart (hero import) import 'src/hero.dart'; 刷新浏览器,程序将正常运行,现在添加新功能的准备工作就做好了。...Angular无法显示null selectedHero的属性并抛出以下错误,在浏览器的控制台中可见: EXCEPTION: TypeError: Cannot read property 'name...当用户选择一个英雄时,selectedHero变为非null,ngIf将英雄详细内容放入DOM中,并评估嵌套的绑定。...在上面添加的样式元数据中,有一个名为selected的自定义CSS类。 为了让选定的英雄更清晰可见,当用户点击英雄名字时,你将把这个选定的class应用到。...一个应用程序不应该是一个单一的组件。 在下一页中,您将将应用程序拆分为子组件,并使它们一起工作。

    3.9K30

    【Java】理解条件判断语句的细节:“if”语句及其潜在问题

    本篇文章将通过一些具体的代码示例,深入分析条件判断语句的工作原理,并解析一些容易出现的错误,最终帮助读者在实际编程中能够避免这些常见的陷阱。...不能处理复杂的条件判断 switch 语句只会根据单个表达式的值来判断,而不能像 if-else 语句那样处理多个条件的组合或更复杂的判断。比如,无法在 case 中使用范围判断、逻辑运算符等。...多个 break 语句的使用 每当嵌套一个新的 switch 语句时,都会要求在每个 case 后面加上 break,否则程序会发生意外的 “fall-through”,导致程序的行为不符合预期。...嵌套的 switch 难以维护 如果程序中有多个嵌套的 switch 语句,维护和修改代码会变得非常困难。...主要的局限性包括只能处理有限的数据类型、无法进行复杂条件判断、以及在嵌套时可读性差、维护难度大。

    42810

    T-SQL基础(三)之子查询与表表达式

    子查询 在嵌套查询中,最外面查询结果集返回给调用方,称为外部查询。嵌套在外部查询内的查询称为子查询,子查询的结果集供外部查询使用。 根据是否依赖外部查询,可将子查询分为自包含子查询和相关子查询。...子查询结果是在运行时计算的,查询结果会跟随查询表的变化而改变。子查询可以返回单个值(标量)、多个值或者整个表结果。 在逻辑上,子查询代码仅在外部查询计算之前计算一次。...,是一个命名的查询表达式,表示一个有效的关系表,因此表表达式必须满足以下三个条件: 无法表表达式结果集顺序 表表达式表示一个关系表,关系型数据库基于集合理论,表中的数据是无序的。... :warning:在查询表表达式时,除非在外部查询中指定了ORDER BY子句,否则无法保证查询结果集中数据的顺序。...有时候会看到即使外部查询未使用ORDER BY但查询结果集按预期顺序返回了结果,这是由于数据库自身优化的结果,依然无法保证每次查询都能按预期结果返回。

    2K40

    T-SQL基础(三)之子查询与表表达式

    子查询 在嵌套查询中,最外面查询结果集返回给调用方,称为外部查询。嵌套在外部查询内的查询称为子查询,子查询的结果集供外部查询使用。 根据是否依赖外部查询,可将子查询分为自包含子查询和相关子查询。...子查询结果是在运行时计算的,查询结果会跟随查询表的变化而改变。子查询可以返回单个值(标量)、多个值或者整个表结果。 在逻辑上,子查询代码仅在外部查询计算之前计算一次。...编写语义清晰明了的SQL可以很大程度的避免逻辑上的错误 表表达式 表表达式,也可称为表子查询,是一个命名的查询表达式,表示一个有效的关系表,因此表表达式必须满足以下三个条件: 无法表表达式结果集顺序...⚠️在查询表表达式时,除非在外部查询中指定了ORDER BY子句,否则无法保证查询结果集中数据的顺序。...有时候会看到即使外部查询未使用ORDER BY但查询结果集按预期顺序返回了结果,这是由于数据库自身优化的结果,依然无法保证每次查询都能按预期结果返回。

    1.7K10

    AngularDart 4.0 高级-结构指令 顶

    但它确实解释了它们是如何工作的以及如何编写自己的结构指示。 指令拼写 在本指南中,您将看到UpperCamelCase和lowerCamelCase拼写的指令。 你已经看到了NgIf和ngIf。...组件以本地HTML元素的方式管理HTML区域。 从技术上讲,这是一个模板指令。 属性指令改变元素,组件或其他指令的外观或行为。 例如,内置的NgStyle指令可以同时更改多个元素样式。...但是如果没有一个令人信服的理由让他们保持身临其境,你应该首先去除用户看不到的DOM元素,并用像NgIf这样的结构指令来恢复未使用的资源。 这些相同的考虑适用于每个结构指令,无论是内置还是定制。...,让欢呼声不那么热烈。 ? 结构指令使起作用,就像您在编写自己的结构指令时看到的一样。...在没有合适的宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

    17.6K20

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    , |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value...b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错 ---- 最最最常用的内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item"...: 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本的可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    7K20

    Angular 2.x折腾记 :(2)初步认识angular2,不一样的开发模式

    前言 想来想去,概念这些东西不怎么想讲,更多的是想讲点实战性的内容。 所以有些东西跳过去了,小伙伴们请去看官方文档哈;跳跃性的前进,写的不好多包涵。..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章 []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value...b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错 最常用的内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象,用来动态判断增加多个样式...index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本的可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的...总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    58510

    Angular 从入坑到挖坑 - 表单控件概览

    4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过在组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理 在使用 FormGroup 时,同样在组件中定义一个属性用来承载控件组实例...当构建复杂表单时,可以在 FormGroup 中通过嵌套 FormGroup 使表单的结构更合理 import { Component, OnInit } from '@angular/core';...4.4、表单的自定义数据验证 4.4.1、自定义验证器 在很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义的验证器来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后将方法作为参数添加到控件定义处即可...4.4.2、跨字段的交叉验证 有时候需要针对表单中的多个控件数据进行交叉验证,此时就需要针对整个 FormGroup 进行验证。...ngOnInit(): void { } } 在针对多个字段进行交叉验证时,在模板页面中,则需要通过获取整个表单的错误对象信息来获取到交叉验证的错误信息 <div class="form-group

    21.5K20

    C语言编程规范 clean code

    = 2; // Bad:多个变量赋值语句放同一行 例外情况: 对于多个相关性强的变量定义,且无需初始化时,可以定义在一行,减少重复信息,以便代码更加紧凑。...选择"*"跟随类型风格时,避免一行同时声明带指针的多个变量。 int* a, b; // Bad: 很容易将 b 误理解成指针 选择"*"跟随变量风格时,可能会存在无法紧跟的情况。...使用卫语句可以有效的减少 if 相关的嵌套层次。...建议5.6 函数的参数个数不超过5个 函数的参数过多,会使得该函数易于受外部(其他部分的代码)变化的影响,从而影响维护工作。函数的参数过多同时也会增大测试的工作量。...通过 do-while(0) 显式为宏加上边界,让宏有独立的作用域,并且跟分号能更好的结合而形成单条语句,从而规避此类问题。

    4.9K10

    C语言编程规范 clean code

    = 2; // Bad:多个变量赋值语句放同一行 例外情况: 对于多个相关性强的变量定义,且无需初始化时,可以定义在一行,减少重复信息,以便代码更加紧凑。...选择"*"跟随类型风格时,避免一行同时声明带指针的多个变量。 int* a, b; // Bad: 很容易将 b 误理解成指针 选择"*"跟随变量风格时,可能会存在无法紧跟的情况。...使用卫语句可以有效的减少 if 相关的嵌套层次。...建议5.6 函数的参数个数不超过5个 函数的参数过多,会使得该函数易于受外部(其他部分的代码)变化的影响,从而影响维护工作。函数的参数过多同时也会增大测试的工作量。...通过 do-while(0) 显式为宏加上边界,让宏有独立的作用域,并且跟分号能更好的结合而形成单条语句,从而规避此类问题。

    6.1K10

    Python-循环和判断语句

    主要完成的功能就是多个条件的判断 age = int(input("你的年龄是:")) if age >= 18: print("我已经成年了") print("我要扛起家中的责任了")...,上一个满足后面的就不会判断了 可以在条件判断中,直接写input语句,节省代码量 1.5 判断语句的嵌套 其实在这里的判断语句的嵌套和C语言中的if语句嵌套if语句思想完全一致。...,一定要注意空格缩进,Python通过空格缩进来决定层次关系 2.Python循环语句 2.1 while循环 此处while循环和C语言当中的while循环也几乎一致,无非就是简化了部分标点符号,让代码写起来更加简单明了...其实很简单,在print语句中,加上end=' ',即可输出不换行 第二个就是:在字符串中,有一个特殊符号: \t,效果等同于在键盘上按下tab键。它可以让我们的多行字符串进行对齐。...只能从被处理的数据集中,依次取出内容进行处理,因此,Python的for循环无法构建无限循环 循环内的语句,需要有空格缩进 它的变量作用域在编程规范上,是只限定在for循环内部,但是实际上是可以访问到的

    16610

    测试思想 单元测试用例基础设计思想总结

    + 1; } return a; } 用例设计 x = -1 注:简单的说,用例大致由3部分组成,一部分是操作,一部分是操作时使用的测试数据,另一部分是输出及预期结果等,这里操作和输出预期结果等都暂且不提...,如上最后一个例子,假设a 5 应该写成a 5,按上述用例也无法发现这个问题 条件覆盖 要求设计足够多的测试用例,为函数中每个判断中的每个条件表达式的设计了所有可能结果值...,比如 上述条件 a 5 本应该是 a 5,按上述测试数据,也无法发现这个错误。...,只提供必要路径,即走完前一个判断,能走到下一个判断; 当然,这里的所说的条件组合覆盖是默认包含了语句覆盖),测试时结合实际业务逻辑检查相关判断表达式是否正确 2、当函数中存在多个判断条件,存在以下几种情况之一的...Ø 不同判段的一个、多个分支路径中变量取值结果影响后续非判定分支路径中的语句的结果取值 路径深度:同一层级相关判断的分支 纳入路径覆盖范围的判断:正如上述说的影响“取值”的那些判断 3、在上述基础上

    1.1K60

    Java8用起来,你的代码将会简化很多

    Java8已经诞生好几年了,但我相信很多小伙伴并不熟悉Java8的特性,并将这些特性使用到工作中去。下面介绍一些我使用Java8的一些经验,真的将我的代码简化了很多。...Optional 你是否遇到过这样一个场景: “通过学生获取姓名,然后再通过这个姓名去会员表里面查询,并将查到的会员打一个学生的标记。 ” 你可能会这么写代码 你看上面的代码,if语句就嵌套了3层。...如果需求更复杂,那么if语句可能会嵌套更多。你的代码肯定通不过代码评审,如果你知晓卫语句,你可能会这么写代码 虽然没有if语句嵌套,但还是有if语句啊。...将对象组装成List 如果你需要将多个Member组装成List,你可能会这么写 上面这么写也没什么不好,但如果你使用了Java8的Stream,组装集合简直是一气呵成。...在方法中尽量不要删除原List,因为你可能在后面的编码中忘记List已经删除了部分元素,最后出现了与预期不符的结果。 如何用Java8的stream()过滤元素?

    67320

    【精通C语言】:深入解析for循环,从基础到进阶应用

    表达式3 表达式3为调整部分,用于循环条件的调整。 1.2 示例 在了解了基础的语法后,我们来看一段示例的代码,让你对for循环有深的理解。...初始化部分省略:循环中无法初始化循环变量,可能导致循环变量未被正确初始化而造成意外行为。 判断部分省略:循环条件无法被判断,导致无法退出循环,造成无限循环。...调整部分省略:循环中无法对循环变量进行调整,可能导致循环变量无法按预期进行调整而造成意外行为。...因此,虽然 for 循环中的初始化部分、判断部分、调整部分是可以省略的,但是不建议全部省略,否则可能会导致程序无法正常工作或者产生意外行为。...for(;;) { printf("hehe\n"); } for循环的嵌套 for(int i=0; i<10; i++) { for(int j=0; j<10; j++)

    2.8K10

    Go 代码块与作用域,变量遮蔽问题详解

    文件代码块:在包代码块的内部嵌套着若干文件代码块(File Block),每个 Go 源文件都对应着一个文件代码块,也就是说一个 Go 包如果有多个源文件,那么就会有多个对应的文件代码块。...Go 代码块支持嵌套,我们可以在一个代码块中嵌入多个层次的代码块,如下面示例代码所示: func foo() { //代码块1 { // 代码块2 { // 代码块3...new 被遮蔽掉,这个提示就会让你不知所措。...不过,在上面示例代码中,遮蔽 new 并不是示例未按预期输出结果的真实原因,我们还得继续往下看。...包级变量 a 没有如预期那样被 getYear 的返回值赋值为正确的年份 2021,2021 被赋值给了遮蔽它的 switch 语句隐式代码块中的那个新声明的 a。

    73630
    领券