问题标签 [angular2-directives]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
5633 浏览

angularjs - 在 Angular 中全局注册一个指令

我正在开发一个 Angular 应用程序。我需要为所有链接添加特殊行为。在 AngularJS 中只会写一个这样的指令:

在 Angular 中,我可以编写如下指令:

但是我怎样才能告诉应用程序在全局范围内使用该指令呢?我有很多关于它们的链接的观点。我是否必须导入它并directives在每个组件的数组中指定它(这是很多)?

我尝试将它注入到bootstrap函数中,就像您应该使用服务一样在全局范围内拥有一个实例,但这没有用

0 投票
2 回答
855 浏览

angular - $rootScop,angular2 中的 $root 值?

我想使用$rootScope, 和$rootangular2 中的值。我也很困惑如何在 angular2 中转换 angularjs 指令,如下所示。

0 投票
1 回答
1994 浏览

angular - 为什么只是 [myHighlight]="..." 对属性指令起作用?

开发指南中的myHighlight属性指令使用名称作为属性选择器:myHighlight

和一个输入属性:

我觉得奇怪/违反直觉的是,我们不必像这样指定选择器属性(尽管如果我们这样做,它仍然有效):

相反,我们只需要指定输入属性,我们也神奇地得到了指令:

我不喜欢这种“快捷方式”/语法糖/魔术,因为它看起来像是我们绑定到元素的myHighlight属性span,而不是实际发生的事情:我们绑定到属性指令myHighlight的属性。myHighlight因此,仅通过查看 HTML,我们无法轻易确定myHighlight属性绑定到哪个元素/组件/指令。

为什么它会这样工作?

考虑这个 HTML 片段:

accessKeyHTML 元素属性或具有输入属性的属性指令是否也命名为accessKey?(仅供参考,accessKey是一个有效的 HTML 元素属性,所以这个例子不是一个属性指令。)

回到高亮指令......如果我将输入属性名称更改为highlightColor

然后我必须指定属性选择器以及属性绑定,我发现它不那么含糊:

因此,“快捷方式”似乎仅在输入属性名称与属性选择器匹配时才有效。

更新:似乎结构指令使用相同的技巧/捷径。例如,

相当于

我只是不喜欢属性名称和选择器的混合。

0 投票
4 回答
569 浏览

angular - 路由器链接行为在 Angular2 beta 中被破坏

我想突出显示当前活动的链接

渲染后,我得到了一个<a>带有正确链接的标签,效果很好。

但是,该指令中还有其他行为,如果href与当前位置相同,则应将router-link-active类添加到锚点。

问题是这效果不好。

_router.IsRouteractive内部有一个当前指令字段,它应该包含当前路由组件。并且该组件与 __navigationInstruction 进行比较。实际上,如果路由组件相等 - 链接是最新的。

问题是当前指令为null。它被分配到:

在处理指令后调用此函数。

所以这不应该很好地工作。

0 投票
2 回答
18713 浏览

angular - 如何在 Angular 2 指令中有条件地插入/删除主机 DOM 元素

我想创建一个指令来决定它的宿主元素是否应该出现在页面上。理想情况下,我希望它从 DOM 中删除元素,而不仅仅是用 css 隐藏/显示它。用例是:

它将使用 UserService 获取 currentUser 角色,如果那里没有管理员li则将被删除。

ng-if我想我可以通过传递表达式在主要组件中进行评估来实现相同的效果(如果它在角度 2 中仍然可用)。但是使用指令它更加语义化和优雅。

可能吗?

我可以在 Angular 1(内部指令的compile函数)中轻松做到这一点,但是如何在 Angular 2 中做到这一点?

0 投票
10 回答
62301 浏览

angular - NgFor 不会在 Angular2 中使用 Pipe 更新数据

在这种情况下,我在视图中显示学生列表(数组)ngFor

每当我将其他学生添加到列表中时,它都会更新,这真是太好了。

但是,当我pipefilter学生的名字命名时,

在我在过滤学生姓名字段中输入内容之前,它不会更新列表。

这是plnkr的链接。

Hello_world.html


sort_by_name_pipe.ts


0 投票
1 回答
1828 浏览

angular - 内部 html 指令

[router-link]我该如何使用[inner-html]

这是示例:

这是 Angular1 http://plnkr.co/edit/F91xvGHBASvqCGBJcEYY?p=preview的解决方案

我怎样才能在 Angular2 中做到这一点?

0 投票
3 回答
2100 浏览

angular - 有没有办法创建那些 HTML 模板替换自定义选择器的组件?

我正在尝试自学 angular2。我试图构建组件“触发调整大小”,我想将其呈现为:

而不是:

(我不希望自定义选择器呈现)

在角度1中。我知道它可以通过“replace:true”选项来实现,但是有可能在angular2中实现吗?

亲切的问候

0 投票
1 回答
355 浏览

javascript - Angular 2 中组件/视觉继承的最佳方法?

总的来说,我是 Angular 的新手,并且认真地开始使用 Angular 2,所以我想知道我是否还没有以正确的方式考虑这个问题。

“面板”是我的应用程序中的内容页面。我想使用一个基本面板组件来为从它派生的特定面板实现提供通用 UI 和功能。

我希望基本面板组件具有包装派生组件提供的模板的模板化内容 - 例如,这将提供一个标准化的标头,其内容由派生实现提供,并允许子组件提供页面内容本身。

最终目标是让开发人员尽可能轻松地创建新面板,而不必担心渲染通用部分,从而可以强制执行一致性。

另外,我希望开发人员能够在从派生组件以编程方式设置的基本变量/属性和由父模板呈现的相应元素之间进行双向绑定......(除了它们中的元素自己的子模板)。

这是可行的吗?或者我是否以错误的方式思考这个问题......不确定我是否处于 Angular 的心态。

当我一直在研究这个时,我开始认为我可能需要调整以创建开发人员将在其面板实现中组成的可重用组件(如 PanelHeaderComponent),而不是从通用 UI 的基础继承......但是,我确实需要以某种方式集中管理所有面板的容器。

想确保我以正确的方式做到这一点。谢谢!

0 投票
1 回答
230 浏览

angular - 在 Angular 2 中使用浏览器 DOM 的方式

如果我想创建一个全局 DOM 元素并从当前指令的许多实例中使用它,我对如何使用本机 DOM 元素的理解很弱?

有人可以解释一下指令和DOM的工作吗?