Angular 自定义结构化指令,如何传入多个输入参数

简介: Angular 自定义结构化指令,如何传入多个输入参数

如下图所示,自定义指令 cxPopover,包含了两个输入参数:


image.pngimage.png


消费的 html 页面:


image.pngimage.png


看起来,cxPopOver 和 cxPopoverOptions 是两个不同的指令,然而其实际上是定义在同一个指令文件里的不同 input 属性。


另一个例子:


image.png

打印输出:

image.png

相关文章
|
JavaScript
关于 Angular 应用部署时的 base-href 参数
关于 Angular 应用部署时的 base-href 参数
|
2月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
28 0
|
2月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
25 0
|
2月前
|
JavaScript 前端开发
如何在 Angular 中为响应式表单创建自定义验证器
如何在 Angular 中为响应式表单创建自定义验证器
16 0
|
2月前
如何在 Angular 路由中使用查询参数
如何在 Angular 路由中使用查询参数
15 0
|
2月前
|
索引
Angular 中的 ngFor 指令
Angular 中的 ngFor 指令
35 0
|
2月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
29 0
|
2月前
在Angular中创建自定义管道
在Angular中创建自定义管道
12 0
|
2月前
|
JavaScript 安全
如何在 Angular Material 中使用自定义 SVG 图标
如何在 Angular Material 中使用自定义 SVG 图标
52 0
|
2月前
|
JavaScript
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
如何使用 ControlValueAccessor 在 Angular 中创建自定义表单控件
14 0

相关实验场景

更多
下一篇
无影云桌面