angular 2/4条件组件布线？

Angular 2/4是一种流行的前端开发框架，它提供了一种条件组件布线的方式，即通过条件来控制组件的显示与隐藏。在Angular中，条件组件布线可以通过以下步骤实现：

在组件的模板文件中，使用ngIf指令来设置条件。ngIf指令接受一个表达式作为参数，如果该表达式的值为真，则显示该组件，否则隐藏该组件。例如：

<app-example *ngIf="condition"></app-example>

上述代码中，只有当condition为真时，才会显示名为app-example的组件。

可以使用ngSwitch指令来根据不同的条件显示不同的组件。ngSwitch指令接受一个表达式作为参数，并根据该表达式的值来决定显示哪个组件。例如：

<div [ngSwitch]="condition">
  <app-example1 *ngSwitchCase="'case1'"></app-example1>
  <app-example2 *ngSwitchCase="'case2'"></app-example2>
  <app-example3 *ngSwitchDefault></app-example3>
</div>

上述代码中，根据condition的值，分别显示app-example1、app-example2或app-example3组件。

可以使用ngClass指令来根据条件动态添加或移除CSS类。ngClass指令接受一个对象作为参数，对象的键是CSS类名，值是一个布尔表达式，如果布尔表达式的值为真，则添加对应的CSS类，否则移除对应的CSS类。例如：

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"></div>

上述代码中，如果isActive为真，则添加active类；如果isDisabled为真，则添加disabled类。

总结：

Angular 2/4提供了多种方式来实现条件组件布线，包括使用ngIf、ngSwitch和ngClass指令。通过这些指令，开发人员可以根据条件来动态显示或隐藏组件，从而实现更灵活的界面布局。

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

腾讯云官网：https://cloud.tencent.com/
云服务器CVM：https://cloud.tencent.com/product/cvm
云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
云存储COS：https://cloud.tencent.com/product/cos
人工智能AI：https://cloud.tencent.com/product/ai
物联网IoT：https://cloud.tencent.com/product/iot
云原生Kubernetes：https://cloud.tencent.com/product/tke

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Angular 4 组件通信

组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。...我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。...1.父→子 input parent.ts import { Component } from '@angular/core'; @Component({ selector: 'page-parent...} from '@angular/core'; @Component({ selector: 'page-child', templateUrl: 'child.html', }) export...子→父 output parent.ts import { Component } from '@angular/core'; @Component({ selector: 'page-parent

8810 0

高级 Angular 组件模式 (4)

命名冲突不仅存在于指令的选择器之间，同时也会存在于指令的Inputs和Outputs属性，当这些属性名一样时，Angular并不会进行提示，它会按原本的逻辑正常工作。...Angular官方提供的规范指南也警示了这一点，当你在使用prefix修饰指令的名称时，也需要注意使用prefix来修饰Input和Output属性的名称。

7531 0

高级 Angular 组件模式 (2)

每一个组件的职能与它们的父组件保持一致，它们各自的职能如下： toggle-button: 代表开关，用来渲染父组件的开关状态 toggle-on: 根据父组件的开关状态，渲染当状态为开时的内容 toggle-off...: 根据父组件的开关状态，渲染当状态为关时的内容组件可以实现@ContentChild装饰器获取这三个子组件的引用，从而可以根据开关状态的变化调整它们之间的关联逻辑。...可以尝试在在线代码库中调整子组件的顺序，你可以在它们中间嵌套任何的html字符串，只要这三个组件是作为的子组件存在的，一切都将正常的运行。.../my.component.html' 译者注这里组件架构方式是标准的Smart Component（智能组件）和Dump Component（木偶组件）组件架构方式。...Content代表内容，这些内容在组件渲染时已经存在于组件声明标签的内部，通常在组件内部以为占位符 View代表视图，视图代表组件本身的模板，代表组件本身的渲染逻辑 @ContentChildren

8153 0

Angular2 组件的使用

创建组件需要三步： 1.从 @angular/core 引入 Component 装饰器 2.创建一个类，并用 @Component 修饰 3.在 @Component 中，设置selector、template...创建和插入这个组件实例的元素属性。...templateUrl（模版地址）： HTML的一种形式，它告诉Angular如何呈现这个组件。...template （模板）： HTML的一种形式，它告诉Angular如何呈现这个组件。...styleUrls（模版样式地址）： css样式，在组件模版中引用的css样式。 ---- sivona

1.5K3 0

angular4实战（2） router

import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; import...RouterModule.forRoot(routes)], exports: [RouterModule], providers: [Auth] }) export class AppRoutingModule { } 在app组件下...，暂时只引了三个组件，一个是项目启动的默认登录页面，一个是404页面，另一个是stones组件，这个组件又会作为一个父级的路由容器来去管理他下面的页面。...login.Auth.ts： “` import {Injectable} from ‘@angular/core’; import {Router, CanActivate} from ‘@angular

5323 0

Angular2 VS Angular4 深度对比：特性、性能

Google的Angular团队已于3月23日发布了Angular4，而期待已久的Angular2版本则是之前版本的完全重构。...那么，本文将会对Angular2和Angular4进行深度对比，以便帮助大家更好的了解这两个版本。 Angular2 Angular2是在2015年底发布的。...许多模块被淘汰出了Angular核心，这也促使Angular2具备更好的性能。Angular走向了不断增长的模块生态系统，这意味着开发者可以自由的选择所需的组件。...指令： Angular2提供了三种指令：组件指令：通过将逻辑封装在HTML，CSS和JavaScript中，从而使得组件可复用。...Angular4 Angular4 的特性和性能相比于Angular 2，Angular4的功能列表中添加了许多新功能，同时还有一些旧功能的改进。

8.7K2 0

Angular2 组件（页面）之间如何传值

组件有两种方式将数据传递：“属性绑定”和“事件绑定”。在Angular 2中，数据和事件变化检测从上到下发生从父级到子级。... Angular 2事件，我们可以使用DOM事件传递模型，其中事件从下到上从子到父。... 因此，当涉及可撤消事件传播时，Angular 2事件可以像普通HTML DOM事件一样对待。 @Input()装饰器定义了一组可以从父组件传递的参数。...number; number3: number; number4: number; constructor() { this.number1 = 0; this.number2...= value; this.number4 = value; } } ---- app/app.module.ts import { NgModule } '@angular/core';

3.9K5 0

angular4父组件向子组件传值，子组件向父组件传值的方法

父组件向子组件传值 @Input 文件目录父组件： father.template.html 父组件 ...father.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'cmt-father...{ Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'cmt-child', templateUrl..., EventEmitter } from '@angular/core'; @Component({ selector: 'cmt-child', templateUrl: '....checked)="checkedBack($event)"> father.component.ts import { Component, OnInit } from '@angular

2.6K1 0

Angular 2 + 折腾记：(4)初步了解路由及使用

2 + 里面有两种url风格一个是常规我们访问url那种protocol://domain/path/f/fds 一种的hash(#)风格，protocol://domain/#/account/login...路由相关的指令或者术语 :路由占位符，可以理解为渲染路由组件的区域，一个组件只能一个无命名，命名的可以多个 ng-content: 可以嵌套一个组件的内容在另外一个组件中...navigate :配合可选参数可以实现当前路劲下的相对跳转，带参数跨页面跳转等 angular 4版本的路由加强了很多。。比如可以在路由进入或者脱离的时候做一些事件处理！！！...'@angular/router'; // 页面组件 import { NameComponent } from '....，一般用于自定义组件或者模块。。

3K2 0

使用angular2 自带的指令,快捷创建服务,组件等!

使用ng 指令创建一个组件!...component produce 可以直接创建指令并更新app.module.ts; ng g service shared/login ; 可以直接创建服务,保存到shared文件下; 因为刚接触angular2

1.9K4 0

Angular 2 + 折腾记：(6) 动手实现只有年月的小组件

前言这个组件实现并不是很复杂，我会尽量注释；这货诞生的理由就是项目刚好有一个地方必须只能选择年月，而github上ng2+日期组件都涉及到年月日或时分秒；效果用gifcam录制的，色彩有些失真，将就吧...月份是字符串，年份是数字 active:false, type:'year' // 月份是'month' }复制代码页面样式就自行折腾啦，我这里只是用了最直白粗暴的下拉滑动在ng4写的...(dblclick)="emitResult(i)">{{i.date}} <div class="sub-list<em>2</em>"...} from '@angular/common'; import { FormsModule } from '@angular/forms'; import { OnlyYearMonthSelectComponent...---- 组件使用温馨提示：若不是以模块的方式到处，只要在使用的模块引入组件声明下就能使用反之则需要引入这个模块，方可使用局部代码 module // 在要使用的模块中引入 // 公用组件 import

7231 0

vue2笔记4 组件

创建组件组件配置不能使用el,组件由vm管理 data必须写为函数形式，保证每个组件实例的data独立 const student = Vue.extend({ name:'student',...$mount('#root'); // 全局注册 Vue.component('student', student); 组件嵌套组件配置内定义components注册子组件即可一般来说注册单独一个App...组件作为根组件注册到vm 组件构造函数 Vue.extend生成的组件对象是一个名为VueComponent的构造函数 Vue解析组件注册的标签时，执行 new VueComponent(options...)创建组件实例对象每次调用Vue.extend都返回一个全新的VueComponent构造函数 Vue.extend = function (extendOptions) { ......、watch、computed中的函数，this是Vue实例对象 VueComponent.prototype.proto === Vue.prototype ，即组件实例对象可以访问到Vue原型上的属性

1102 0

详解ANGULAR2组件中的变化检测机制（对比ANGULAR1的脏检测）

组件和变化检测器如你所知，Angular 2 应用程序是一颗组件树，而每个组件都有自己的变化检测器，这意味着应用程序也是一颗变化检测器树。顺便说一句，你可能会想。是由谁来生成变化检测器？...Angular 2 编译器为每个组件自动创建变化检测器，而且最终生成的这些代码 JavaScript VM友好代码。...虽然 Angular 2 优化后的变化检测执行的速度很快，但我们能否只针对那些有变化的组件才执行变化检测或灵活地控制变化检测的时机呢？答案是有的，接下来我们看一下具体怎么进行优化。...变化检测策略在 Angular 2 中我们可以在定义组件的 metadata 信息时，设定每个组件的变化检测策略。...针对这种情况，Angular 2 为我们提供了 OnPush 的检测策略。

2.9K9 0

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

再安装一个库: npm install --save angular2-flash-messages 这个库可以略微灵活的显示提示信息. npm install --save angular2-flash-messages.../core'; import { FlashMessagesService } from 'angular2-flash-messages'; import { Router } from '@angular...} from 'angular2-flash-messages'; import { Router } from '@angular/router'; import { Client } from '.../services/client.service'; import { FlashMessagesService } from 'angular2-flash-messages'; import { Router...客户ID: {{id}}

4.3K5 0

Angular2 之路由与导航基础知识路由模块组件路由路由守卫

一个url对应的一个页面，在angular2中是一个组件。定义一个规则。...import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/...，只有当这些前置条件满足的时候，才能被导航到该页面。...路由器会先按照从最深的子路由由下往上检查的顺序来检查CanDeactivate守护条件。然后它会按照从上到下的顺序检查CanActivate守卫。...几个概念无组件路由无组件路由，不借助组件对路由进行分组。来看AdminComponent 下的子路由，我们有一个带path和children的子路由，但它没有使用component。

3.2K1 0

angular 2+组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

目前，Angular的CKEditor 5组件仅支持通过构建集成CKEditor 5。由于缺乏在angular-cli中调整webpack配置的能力，因此无法集成从源构建的CKEditor 5。...快速开始在现有的Angular项目中，为Angular 2+安装CKEditor 5 WYSIWYG编辑器组件： npm install --save @ckeditor/ckeditor5-angular...'Enable editor' : 'Disable editor' }} 支持的@Output属性 Angular 2+的CKEditor 5组件支持以下@Output属性： ready...样式 Angular的CKEditor 5组件可以使用组件样式表或使用全局样式表进行样式设置。让我们看看如何使用这两种方法设置CKEditor 5组件的高度。...贡献和报告问题 Angular 2+的富文本编辑器组件的源代码可以在GitHub上的https://github.com/ckeditor/ckeditor5-angular中找到。

3.4K2 0

Angular 2 + 折腾记：(8) 动手写一个不怎么靠谱的上传组件

支持组件高度设置,宽度自适应支持标题设置 ---- 组件以模块形式导出代码如下，相关逻辑请看注释。.../core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms';...default; // 边框颜色 $iu-icon-color:#d5d4d4 !...default; .upload-fail { .upload-area { border: 2px solid #d9534f !...: any; // 上传限制条件 @Input() uploadType: string; // 限定上类型 @Output() uploadEvt = new EventEmitter();

9541 0

Angular4.x通过路由守卫进行路由重定向，实现根据条件跳转到相应的页面

需求：最近在做一个网上商城的项目，技术用的是Angular4.x。...有一个很常见的需求是：用户在点击“我的”按钮时读取cookie，如果有数据，则跳转到个人信息页面，否则跳转到注册或登录页面解决在这里通过Angular的路由守卫来实现该功能。 1....[RouteguardService] },//canActivate就是路由守卫 { path: '', redirectTo: '/home', pathMatch: 'full' } ] 2....路由守卫条件（RouteguardService.ts） import { Injectable, Inject } from "@angular/core"; import { DOCUMENT }...} from "@angular/router"; import userModel from ".

1.3K4 0

Angular2 返回时组件生命周期函数不被调用的解决方法

这两天使用 Angular2 遇到的一个 @angular/router 的 bug：症状 @angular/router 版本 3.0.0-beta.2 使用 safari 浏览器，iOS 的都可以...打开 Angular2 官方的范例项目点击导航栏上的 Heroes 转到 Heroes 列表页面后退回到 Dashboard 页面，正常情况下应该有的四个 Heroes 没有出现桌面 safari...临时应急的话可以自行修改项目目录下的node_modules/@angular/router/src/router.js 的 282 和 284 行即可 this.locationSubscription

1.8K4 0

使用angular4和asp.net core 2 web api做个练习项目(三)

下面将开发登陆和授权的部分, 这里要用到identity server 4....localhost:5000 CoreApi.Web作为api, 都已经配置好了.它的地址是 http://localhost:5001 Login 登陆由于我们使用的是Identity Server 4的登录页面...'rxjs/add/operator/map'; import { User } from 'oidc-client'; import { FlashMessagesService } from 'angular2...同时运行angular项目: 1. 首次浏览: 2. 点击登陆: 点击登陆就跳转到authorization server的登录页面了, 你在这里需要注册一个用户........然后输入用户名密码登陆. 3.同意授权点击yes 同意授权. 4.跳转回angular页面: 首先跳转回的是angular的login-callback路由, 然后瞬间回到了主页: 5.

1.3K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云