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

用*ngIf Angular 2对所有路由进行换行

*ngIf是Angular 2中的一个内置指令,用于根据条件来显示或隐藏HTML元素。它的作用是根据给定的表达式的结果来决定是否渲染DOM元素。

在这个问题中,*ngIf可以用于对所有路由进行换行。具体实现如下:

  1. 首先,在Angular组件的模板文件中,找到需要进行换行的路由元素所在的位置。
  2. 在该位置使用*ngIf指令,并将其绑定到一个布尔类型的变量,例如isLineBreak
  3. 在组件的逻辑代码中,定义isLineBreak变量,并根据需要设置其值为true或false,以决定是否进行换行。
  4. isLineBreak为true时,ngIf指令会渲染该路由元素,从而实现换行效果;当isLineBreak为false时,ngIf指令会隐藏该路由元素。

下面是一个示例代码:

代码语言:html
复制
<ng-container *ngFor="let route of routes">
  <div *ngIf="isLineBreak">
    <br>
  </div>
  <div>
    {{ route }}
  </div>
</ng-container>

在上面的代码中,routes是一个包含所有路由的数组。isLineBreak是一个布尔类型的变量,根据需要进行设置。

这样,当isLineBreak为true时,会在每个路由之间插入一个换行符;当isLineBreak为false时,不会插入换行符。

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

相关·内容

Angular 6.x 快速入门

'; } 定义数据接口 在 TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象外,也可用于对「对象的形状(Shape)」进行描述。...ngIf 指令语法 ... ngFor 指令简介 该指令用于基于可迭代对象中的每一项创建相应的模板。... ngIf 与 ngFor 指令使用示例 import { Component } from '@angular/core'; interface Address { province...反之,我们的路径将在 URL 地址栏中显示,随后进行后续视图更新,以匹配 routerLink 中设置的值。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载的组件时,它将动态创建对应的组件,并将其作为兄弟元素,插入到

14.1K20

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

--规定所有url的默认目标由谁开始--> <meta name="viewport" content="width=device-width, initial-scale...class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index = index": 可以这个来遍历数组对象...,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个...,当前不在乎低版本的可以[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

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

    --规定所有url的默认目标由谁开始--> <meta name="viewport" content="width=device-width, initial-scale...class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index = index": 可以这个来遍历数组对象...,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item" : 比如loading到视图全部渲染就经常用到这个...,当前不在乎低版本的可以[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。...总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    10510

    AngularDart 4.0 高级-结构指令 顶

    三种常见的内置结构指令 - NgIf,NgFor和NgSwitch ... - 在模板语法指南中进行了描述,并在整个Angular文档中的示例中进行了介绍。...Angular不断检查可能会影响数据绑定的更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,但组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大,响应性可能会降低,用户什么也看不到。...您将尝试将*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。 您仅可以将一个结构指令应用于宿主元素。 原因是简单。 结构指令可以宿主元素及其后代完成复杂的事情。...这个例有一个简单的解决方案:将*ngIf放在包裹*ngFor元素的容器元素上。 一个或两个元素可以是一个temple,所以你不必引入额外的HTML级别。...注意使用NgIf的脱糖形式。 ? 现在有条件地排除一个选项。

    16.1K20

    AngularDart4.0 指南- 显示数据 顶

    现场示例(查看源代码)演示了此页面中描述的所有语法和代码片段。 插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称。...NgIf进行条件显示 有时候,只有在特定情况下,应用程序才需要显示视图或视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。...Angular ngIf指令根据布尔条件插入或删除一个元素。... 不要忘记* ngIf中的星号(*)。 这是语法的重要组成部分。 在“模板语法”页面的ngIf部分阅读有关ngIf和*的更多信息。...概要 现在你知道如何使用: 双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类,用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

    5.3K10

    Angular--Module的使用

    Angular 是一个html 和typescript 构建客户端应用的平台与框架。 它将核心功能和可选功能作为一组TypeScript 库进行实现,你可以把它们导入到你的应用中。 1....模块Module Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。 Angular 应用就是由一组NgModule定义的。...它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。...app 时 CommonModule @angular/common 当你想要使用NgIf 和NgFor时 FormsModule @angular/forms 当要构建模板驱动表单时 ReactiveFormsModule...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

    4.9K40

    Angular2 @NgModule

    @NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。 一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。...(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中) ---- 3.imports:导入其他...比如导入CommonModule后就可以使用NgIf、NgFor等指令。 ---- 4.exports:用来控制将哪些内部成员暴露给外部使用。...这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。...除非不通过路由动态将component加入到dom中,否则不会用到这个属性。 ---- sivona

    2.1K40

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

    Angular所有基本的HTML表单元素提供值访问器,Forms指南展示了如何绑定到它们。...当指令没有合适的宿主元素时如何对元素进行分组。 如何编写自己的结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见的结构指令: NgIf:有条件地从DOM中添加或删除元素。...'none' : 'block'">Hide with style 隐藏一个元素与NgIf去除一个元素是完全不同的。 当你隐藏一个元素时,该元素及其所有的后代仍然保留在DOM中。...这些元素的所有组件都保留在内存中,Angular可能会继续检查更改。 您的应用可能会占用相当可观的计算资源,会降低用户不可见的性能。...你可以*ngIf来解决这个问题。 <div *ngIf="nullHero !

    30K20

    Angular快速学习笔记(2) -- 架构

    Angular 是一个 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身使用 TypeScript 写成的。...它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中。 全新的Angular 是一个 HTML 和 TypeScript 构建客户端应用的平台与框架。...Angular 在每个 JavaScript 事件循环中处理所有的数据绑定,它会从组件树的根部开始,递归处理全部子组件。 ?...当 Angular 渲染它们的时候,会根据指令给出的指示对 DOM 进行转换。 指令就是一个带有 @Directive 装饰器的类。...1.4 路由(Routing) Angular 的 Router 模块提供了一个服务,它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。

    5.3K20

    Angular Material 的设计之美

    正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。 官方列举了如下几点来解释“高质量”的含义。 国际化和可访问性,以便所有用户都可以使用。...在各种各样没有 bug 的例中按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范的范围内进行定制。 将性能开销降至最低。...顺便插一句,如果大家纠结 Sass 还是 Less,可以看一下这篇文章 CSS 预处理器中的循环,个人不建议 Less,请原谅我无意引战?。...把这句名言用在 Angular Material 上丝毫不为过,其实除了我们看到的组件之外,Material 还有一些隐藏组件,比如可以 menu 组件构造 popover,我会在下文中介绍。...任何组件库都无法满足所有业务需求,如果你无法在 Angular Material 中找到可用的组件,你可以尝试第三方组件,或者可以将 ng-zorro-antd 按模块单独引入。

    5K30

    Angular 显示英雄列表

    你可以多种方式定义私有样式,或者内联在 @Component.styles 数组中,或者在 @Component.styleUrls 所指出的样式表文件中。...并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。 不要忘了 ngIf 前面的星号(*),它是该语法中的关键部分。...src/app/heroes/heroes.component.html (*ngIf)     {{selectedHero.name |...给所选英雄添加样式 所有的  元素看起来都是一样的,因此很难从列表中识别出所选英雄。 如果用户点击了“Magneta”,这个英雄应该用一个略有不同的背景色显示出来,就像这样: ?...你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以 class 绑定来切换 CSS 的样式类。

    4K30

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

    组件有一个由Angular自己管理的生命周期。 Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。...ngOnDestroy 在Angular摧毁指令/组件之前进行清理。 取消订阅observables并分离事件处理程序以避免内存泄漏。 在Angular摧毁指令/组件之前调用。...其他生命周期挂钩 其他Angular子系统除了这些组件钩子可能有自己的生命周期钩子。 例如,路由器也有自己的路由器生命周期挂钩,可以让我们利用路由导航中的特定时刻。...本章的其余部分将进一步详细讨论选定的练习 Peek-a-boo:所有钩子 PeekABooComponent演示了一个组件中的所有钩子。 如果有的话,你很少会实现像这样的所有接口。...Angular从DOM中移除所有英雄元素并同时销毁他们的间谍指令。 间谍的ngOnDestroy方法报告其最后时刻。

    6.2K10

    angular入门教程_初学者织围巾简单教程慢动作

    整体上说,这个系列的文章有以下特色: 我会按照初学者一般的学习过程,我自己的语言一步一步进行讲解。...我把这些例子分成了9个开源项目,它们互相独立,方便大家进行参考和练习。这些教学的开源项目本身是免费的,列在这篇文章的尾部。...命名约定 老版本使用 AngularJS 指代,所有新版本都叫做 Angular。...如果你需要修改端口号,可以 ng serve –port ****来进行指定。...当然,也有一些人不喜欢“双向数据绑定”,还有人专门写了文章来进行批判,也算是前端一景。 在模板里面使用结构型指令 Angular 有3个内置的结构型指令:*ngIf、*ngFor、ngSwitch。

    3.3K20

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

    由于路由器在自己的包中,首先将该包添加到应用的pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立的可选软件包中的原因。...这个举动创建了一个单例HeroService实例,可用于应用程序的所有组件。 Angular注入HeroService,您可以在DashboardComponent中使用它。...按钮的点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。...用户可以在应用程序周围进行导航,从仪表板到英雄详细信息,然后返回,从英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。 风格化应用程序 该应用程序是功能,但它需要样式。...早些时候,你元素包围了这些链接: router-link-active 类 Angular路由器将router-link-active类添加到其路由与活动路由相匹配的HTML导航元素。

    17.6K30
    领券