问题标签 [angular2-hostbinding]

我正在使用 Angular 指令在表单中切换显示和隐藏密码字段。

我已经能够实现切换密码值的总体目标，但是，我似乎无法切换按钮中呈现的文本以反映输入字段的状态。

一旦用户单击按钮以显示输入的密码，如何将按钮的文本切换为 HIDE，然后在用户单击按钮以隐藏密码后将其切换回 SHOW？

这是代码库：

HTML 模板：

查看结果演示：密码切换演示

您将如何添加和设置可以通过参数更改的 HTML 类，使用 Angular 指令？假设我们有一个已经存在类的 div，但没有指令：

现在，我们要为其附加一个指令和一个参数：

如果我需要 4，那么我的动态添加的类将像这样更改：

我完全知道如何使用@hostbinding 添加一个类，但是我找不到如何使用我的“set”参数动态更改这个类

非常感谢你

我创建了一个自定义指令，该指令通过单击事件添加/删除类选择器。应该很简单，只要我在 ngFor 循环之外使用该指令，它就可以正常工作。该指令由以下代码组成：

我正在尝试在 Cards 组件内的按钮上使用该指令。因此，在 Cards 组件的 html 模板中，按钮代码如下所示：

这在我单独使用组件时有效，但是当我使用下面的 ngFor 循环生成多张卡片时，装饰器似乎不再起作用。

指令中的 isFav 属性是固定的，当我检查按钮时未添加 .isFav 类选择器。尽管 console.log 消息正确显示，这意味着指令中的 onClick 方法确实运行了。

任何帮助将非常感激。提前致谢。

我正在尝试将我的角度组件中的变量绑定到 CSS 关键帧内的变量，我正在使用该变量动态地为 div 设置动画。我遇到HostBinding了一个潜在的解决方案，但是我（认为）我正确地遵循了声明，但是在使用变量时动画不起作用。我正在使用 angular 10.0.14 任何帮助表示赞赏。

这是我的 CSS 代码：

这是我的 component.ts HostBinding 声明：

我们有一个非常简单的组件，应该淡入淡出:enter和:leave事件：

该组件的使用方式如下：

现在动画:enter确实运行了。但是当组件被移除时，元素不会淡出（变量someBoolean变为false）。

什么不见​​了？

我加入了一个新的 Angular 项目，在 app.component.ts 上有一些 @HostBindings，即使没有触发直接事件，它们也会不停地调用。前任。：

布局对象是 SettingsService 的一部分，该属性仅在切换侧面菜单时更改：header.component.ts：

我正在尝试使用指令来激活我的 Angular 项目中的下拉菜单。自 bootstrap 3 以来，“open”类已被弃用，但我目前正在使用 bootstrap 5，以及如何使用“show”类而不是“open”？

我的指令：

我来自组件的 HTML 片段：

谢谢。

我正在尝试基于这个想法Wizdm Genesys实现 Animate On Scroll 库/助手

当元素与视口相交时，我有一个服务会发出IntersectionInfo（IsIntersecting、Direction、IsEntering 等）对象。

我订阅它，如果元素正在进入视口，我会触发进入动画。

除非我ChangeDetection.OnPush在包含该元素的任何组件或其任何父级上 使用它，否则它工作正常。detectChanges()不修复它。

奇怪的是变量正在改变，我可以在开发者工具中看到它，但它没有触发动画。

使用滚动动画库 (HelloComponent.html) 的组件：

在我使用的 AosComponnentselector: '[myAos]'中，它可以像指令一样使用。

这是 AosComponent

如果我@Input() animate从内部设置为 true，HelloComponent它总是有效的。如果我设置@Input() animate为 true ，则它仅在我从中subscribe删除时才有效changeDetection: ChangeDetectionStrategy.OnPushHelloComponent

你好组件.ts

StackBlitz 在这里：我的 Stackblitz

有任何想法吗？？？

我目前正在开发一个 Angular 项目，该项目创建了一堆动态组件，我希望每个组件都有不同的颜色，这取决于它在初始化时调用服务的结果。该组件的代码如下：

有人可以帮我弄清楚如何使用 HostBinding 吗？

我想将 routerLink 添加到 Angular 组件中的主机元素，如下所示：

但是当我单击该组件时，它不会导航到指定的路线。我究竟做错了什么？Angular 11甚至可以做到这一点吗？

Use @HostBinding or @HostListener rather than the 编辑：我还尝试了旧的主机绑定方式（tslint: host不推荐这种方式 metadata property (https://angular.io/styleguide#style-06-03) (no-host-metadata-property)tslint(1)：

这之后也没有路由器导航。