当两个同级组件都使用*ngIf时，它们之间共享数据 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

AngularDart 4.0 高级-结构指令顶

当条件为false时，NgIf从DOM中删除它的宿主元素，将它从DOM事件（它所依附的）中分离出来，将组件从Angular变化检测中分离出来并销毁它。组件和DOM节点可以被垃圾收集并释放内存。...对于一个简单的段落来说，隐藏和删除之间的区别并不重要。当宿主元素连接到资源密集型组件时，这很重要。即使隐藏，这种组件的行为也会继续。该组件保持连接到其DOM元素。它一直在倾听事件。...当两个指令声明相同的宿主元素时，哪一个优先？ NgIf或NgFor应该先走哪一个？ NgIf能否取消NgFor的效果？...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase的值与switch的值匹配时，会显示它的宿主元素。...当没有同级NgSwitchCase匹配switch的值时，NgSwitchDefault显示它的宿主元素。您应用指令的元素是其宿主元素.

16.1K2 0

AngularDart4.0 指南- 显示数据顶

当您使用AppComponent类（在web / main.dart中）引导时，Angular将在index.html中查找，查找它，实例化AppComponent...您可以将组件的模板存储在两个地方之一中。您可以使用模板属性内联定义它，也可以使用组件元数据@Component注解的templateUrl属性链接到单独定义模板的HTML文件。...在模板中使用任何Angular指令之前，您需要将它们列在组件的@Component注解的指令参数中。...双引号内的模板表达式，* ngIf =“heros.length> 3”，看上去和表现很像Dart。当组件的英雄列表中有三个以上的项目时，Angular会将该段落添加到DOM，并显示消息。...概要现在你知道如何使用：用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类，用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

非true/false的值当isActive表达式返回true值时，NgIf将HeroDetailComponent添加到DOM。...当表达式为false时，NgIf从DOM中删除HeroDetailComponent，销毁该组件及其所有子组件。在Dart模式下，Dart期望布尔值（类型为bool的）为true或false。...当NgIf为false时，Angular从DOM中删除元素及其后代。它摧毁了他们的组件，潜在地释放了大量的资源，从而带来了更加快速的用户体验。展示/隐藏技术适合少数几个后代的元素。...这里我们看到NgIf守护两个。 currentHero名称仅在有currentHero时出现。 nullHero从不显示。 ngIf="currentHero !...不幸的是，当currentHero为空时，应用程序崩溃。你可以用*ngIf来解决这个问题。 <!

30K2 0

Angular 快速学习笔记(1) -- 官方示例要点

ngIf="selectedHero"> 条件css类 [class.selected]="hero === selectedHero" 组件的输入参数，需要使用 @Input() 装饰器...组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存，让组件只需要关注展示 c....通过注入，服务可以在多个“互相不知道”的类之间共享信息 d....添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...ii. component：当导航到此路由时，路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent

3.6K0 0

Angular 快速学习笔记(1) -- 官方示例要点

ngIf="selectedHero"> 条件css类 [class.selected]="hero === selectedHero" 组件的输入参数，需要使用 @Input() 装饰器...组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务 b. 服务负责业务数据获取和保存，让组件只需要关注展示 c....通过注入，服务可以在多个“互相不知道”的类之间共享信息 d....添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...ii. component：当导航到此路由时，路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent

3.7K5 0

Angular2 之结构型指令几个概念

隐藏元素的利弊当我们隐藏元素时，组件的行为还在继续。它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。angular会继续检查哪些能影响数据绑定的变更。...弊如果我们很快再次使用这个组件的时候，重建组件的代价是非常大的。当ngIf重新变成true的时候，angular会重新创建该组件及其子树。angular会重新运行每个组件的初始化逻辑。...总结基于上面的利弊分析，无论是我们在使用内置的指令还是使用自定的指令的时候，我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。...标签结构型指令，比如ngIf，使用HTML 5的template标签完成它们的“魔法”。控制Template标签内DOM添加与显示，在模板级别使用的。...ngIf 接下来这两个ngIf范例的效果完全相同，只是我们写成了另一种风格： <!

3K2 0

AngularDart4.0 指南-体系结构概述顶

数据绑定在模板及其组件之间的通信中起着重要的作用。数据绑定对于父组件和子组件之间的通信也很重要。指令 ? Angular模板是动态的。...当Angular呈现它们时，它根据指令给出的指示转换DOM。指令是一个带有@Directive注解的类。...* ngIf仅在选择的英雄存在时才包含HeroDetail组件。在Dart中，唯一值为true的是布尔值true; 所有其他值是错误的。..._heroService); 当Angular创建一个组件时，它首先要求一个注入器来提供组件需要的服务。注入器维护一个先前创建的服务实例的容器。...通过组件提供的服务与应用程序组件树中的所有组件的后代共享。引导时注册提供程序的情况非常少见。有关详细信息，请参阅依赖注入页面的配置注入部分。

7.9K3 0

Angular 显示英雄列表

你可以定义属于特定组件的私有样式，并且让组件所需的一切（代码、HTML 和 CSS）都放在一起。这种方式让你在其它地方复用该组件更加容易，并且即使全局样式和这里不一样，组件也仍然具有期望的外观。...你可以在本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式和样式表都是局限于该组件的。 ...修复 - 使用 *ngIf 来隐藏空白的细节该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。把显示英雄详情的 HTML 包裹在一个中。...为什么这样是正常的当 selectedHero 为 undefined 时，ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...你使用 *ngFor 显示了一个列表。你使用 *ngIf 来根据条件包含或排除了一段 HTML。你可以用 class 绑定来切换 CSS 的样式类。

4.4K7 0

Angular快速学习笔记（2） -- 架构

- 组件定义视图，是可视化部分，每个应用都至少有一个根组件 - 组件使用服务，组件提果数据可视化，而服务提供与视图不直接相关的功能，后台开发的容易理解。...数据绑定在模板及其组件之间的通讯中扮演了非常重要的角色，它对于父组件和子组件之间的通讯也同样重要。 ? 父组件，通过属性绑定向子组件传递数据，而子组件通过事件绑定向与父组件通信。...当 Angular 渲染它们的时候，会根据指令给出的指示对 DOM 进行转换。指令就是一个带有 @Directive 装饰器的类。...通常在构造函数，注入依赖的service： constructor(private service: HeroService) { } 当 Angular 发现某个组件依赖某个服务时，它会首先检查是否该注入器中已经有了那个服务的任何现有实例...1.4 路由（Routing） Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。

5.3K2 0

Angular 从入坑到挖坑 - 组件食用指南

当需要使用这个组件时，直接在页面上添加选择器对应的标签就可以了 ?...="expr">NgIf 结构型指令当 expr 属性为 true 时，这个元素则会显示在页面上，当属性值为 false 时，则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...当渲染的数据发生改变时 4，会导致 dom 元素的重新渲染，此时可以采用 trackBy 的方式，通过在组件中添加一个方法，指定循环需要跟踪的属性值，此时当渲染的数据发生改变时，只会重新渲染变更了指定的属性值的数据...4.4、组件之间的通信 4.4.1、输入属性与输出属性输入属性（@Input）和输出属性（@Output）用来在父子组件或指令中进行共享数据。...4.4.4、非父子组件之间的通信不管组件之间是否具有关联关系，都可以通过共享一个服务的方式来进行数据交互，也可以将需要进行共享的数据存储到一些存储介质中，通过直接读取这个存储介质中的数据进行通信创建一个服务

15.8K3 0

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

-- each hero goes here --> 下一步你将添加英雄名字使用ngFor指令罗列英雄目标是将组件中的英雄列表绑定到模板，迭代它们，并单独显示它们。...，它们的作用域为该特定组件。...当没有选定的英雄时，ngIf指令从DOM中移除英雄详情HTML。没有英雄细节元素或绑定担心。...您了解了如何在组件模板中使用核心指令ngIf和ngFor。您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。你的应用应该看起来像这个实例（查看源代码）。...一个应用程序不应该是一个单一的组件。在下一页中，您将将应用程序拆分为子组件，并使它们一起工作。

3K3 0

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

响应式表单建立表单由组件隐式的创建表单控件实例在组件类中进行显示的创建控件实例表单验证指令函数在表单数据发生变更时，模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新，...添加到应用模块中 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 新建一个类文件，用来承载组件与模板之间进行双向数据绑定的数据信息...，并使用 ngModel 完成组件与模板之间的数据双向绑定姓名：...对于使用了 FormGroup 的表单来说，当使用 setValue 进行数据更新时，必须保证新的数据结构与原来的结构相同，否则就会报错 import { Component, OnInit } from...同模板驱动表单的数据有效性验证相同，在响应式表单中同样可以使用原生的表单验证器，在设定规则时，需要将模板中控件名对应的数据值的第二个参数改为验证的规则在响应式表单中，数据源来源于组件类，因此应该在组件类中直接把验证器函数添加到对应的

18.9K2 0

Angular 2 架构（下)

当 Angular 渲染它们时，它会根据指令对 DOM 进行修改。指令是一个带有"指令元数据"的类。在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上。...在Angular中包含以下三种类型的指令：属性指令：以元素的属性形式来使用的指令。结构指令：用来改变DOM树的结构组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。...*ngIf 表示只有在选择的项存在时，才会包含 SiteDetail 组件。...创建组件时，会首先为组件所需的服务找一个注入器（ Injector ）。...当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

2.2K2 0

ng-content 中隐藏的内容

ngProjectAs 有时你的内部组件会被隐藏在另一个更大的组件中。有时你只需要将其包装在额外的容器中即可应用 ngIf 或 ngSwitch。...页面中会显示一个或两个框，如果我们包含两个框，它们的内容是显示 1 和 1 或 1 和 2？...其中唯一方法就是查看第三方库的代码，了解它们的内部处理逻辑。将组件的生命周期被绑定到我们的应用程序组件而不是包装器的意义是，开发者可以掌控计数器只被实例化一次，而不用了解第三方库的内部代码。...因为 ng-content 只是移动元素，所以可以在编译时完成，而不是在运行时，这大大减少了实际应用程序的工作量。...，每当我们隐藏并重新显示时都正确递增！

2.7K3 0

Angular快速学习笔记（3） -- 组件与模板

然后，用封装了 HTML 的组件创建新元素，并把它们当作原生 HTML 元素在模板中使用。 <!...钩子用途及时机 ngOnChanges() 当 Angular（重新）设置数据绑定输入属性时响应。...通过输入型绑定把数据从父组件传到子组件 HeroChildComponent 有两个输入型属性，它们通常带@Input 装饰器。...父组件和它的子组件共享同一个服务，利用该服务在家庭内部实现双向通讯。 5.组件样式 Angular 应用使用标准的 CSS 来设置样式。...或 stylus 来编写样式，并使用相应的扩展名（.scss、.less、.styl）把它们指定到 @Component.styleUrls 元数据中。

15.3K3 0

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

可以在ngOnInit和routerOnActivate之间绘制一个平行线。两者的前缀都是为了避免碰撞，并且在组件初始化时都运行正确。...OnInit 使用ngOnInit有两个主要原因：在施工后不久执行复杂的初始化在Angular设置输入属性后设置组件有经验的开发人员同意组件应该便于构建且安全。...这个钩子迭代已更改的属性并记录它们。示例组件OnChangesComponent具有两个输入属性：hero和power。...当英雄名字超过10个字符时，doSomething方法更新屏幕。...Angular的单向数据流规则禁止在视图组成之后更新视图。组件视图组合完成后，这两个钩子都会触发。如果钩子立即更新组件的数据绑定comment属性，Angular会抛出一个错误（尝试它！）。

6.2K1 0

Angular 显示英雄列表

你可以定义属于特定组件的私有样式，并且让组件所需的一切（代码、HTML 和 CSS）都放在一起。这种方式让你在其它地方复用该组件更加容易，并且即使全局样式和这里不一样，组件也仍然具有期望的外观。...你可以在本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式和样式表都是局限于该组件的。 ...修复 - 使用 *ngIf 来隐藏空白的细节该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。把显示英雄详情的 HTML 包裹在一个中。...为什么这样是正常的当 selectedHero 为 undefined 时，ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。...你使用 *ngFor 显示了一个列表。你使用 *ngIf 来根据条件包含或排除了一段 HTML。你可以用 class 绑定来切换 CSS 的样式类。

4K3 0

设计思路

设计一个认证模块为了实现认证功能，需要有个认证模块，认证信息存到数据库，用户使用跳板机首先需要认证。...设计一个授权框架授权是跳板机不可缺少的部分，授权就是用户和资产的关系，将关系保存的数据库，用户登录主机需要先查授权。...用户和主机模块跳板机脱离不了用户和主机，所以这两个部分是基本的模块，另外我们将主机模块扩展，实现基本CMDB功能。...Web Terminal 现在都流行Web操作一切，于是我们又实现了Web Terminal，供用户直接在线链接服务器，这里实现是用了Tornado来完成的，Tornado实现WebSocket特别简单...RDP访问时，会向guacamole进行post请求 /guacamole/api/session/ext/jumpserver/asset/add 使用 mstsc.js 实现web版的javascript

8272 0

AngularDart4.0 英雄之旅-教程-05多组件顶

您不能在一个组件之上填充所有功能; 这是不可维护的。您需要将其分解为子组件，每个子组件都专注于特定的任务或工作流程。最终，AppComponent可以成为托管这些子组件的简单shell。...约定组件类名称使用驼峰命名法并以“Component”结尾，例：HeroDetailComponent 组件文件的名称使用Snake Case命名法-单词小写且使用下划线分割以_component...将原始AppComponent重构为两个组件，现在和将来都会带来好处：您通过减少其职责简化了AppComponent。...前方的路 “The Tour of Heroes ”游戏的应用程序可以更多地使用共享组件，但其（模拟）数据仍然是在AppComponent中硬编码的。这是不可持续的。...数据访问应重构为单独的服务，并在需要数据的组件之间共享。您将学习在下一个教程页面中创建服务。

1.8K1 0

浅谈Angular

*ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么?...可以给@Input装饰器内部填写一个元数据,这个值是外部使用的名字内部还是使用原来的名字 3.如果想要给指令添加的元素绑定的事件,需要使用@HostListener装饰器如果要通过指令控制DOM的显隐...,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件不销毁,init方法不会再走,导致当前数据无法更新解决办法: 使用RxJS解决,RxJS提供响应式开发(基于观察者模式),我们可以订阅某个值...,要声明在子组件里 2.子向父 -- @Output装饰器声明事件,要声明在子组件里 3.兄弟之间 -- 中间人模式拓展:事件源对象在事件中，当前操作的那个元素就是事件源。...比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input。

4.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭