问题标签 [angular2-hostbinding]

问题：

是否可以以@HostBinding这种方式在宿主元素上添加、删除或切换类而不删除预先存在的类，特别是当类需要动态切换时？

例如，这将添加light类并且不会破坏先前的类；但是，light不能是动态的。

想象一下这个渲染的 dom 节点：

使用此控制器：

作为这个示例控制器，将动态添加灯光类，但据我所知，它将删除主机元素上的其他类。

最后，第二个示例将重新渲染 dom 元素，如下所示：

因此，删除以前不需要的类。关于如何两全其美的任何想法？

我有一个带有数字输入的组件。并基于该输入值，我想为组件设置一个宽度。我需要通过类来做，因为宽度是通过 sass 变量计算的，并且它可能会被改变。

所以我有三个不同宽度的类。根据输入我想设置一个类。我有它的工作，但它非常丑陋，我觉得在我的代码中有这个是个白痴：

是否有可能以某种方式为 get 函数提供参数，这样我就不必拥有其中的三个？还是因为某些原因而愚蠢？

或者你知道其他更好的方法吗？ 或者如果这样的事情是可能的：

感谢您的时间。

我一直在尝试使用@HostBinding装饰设置动画参数，但它似乎不起作用，我错过了什么

和主机绑定

我有一个@HostBinding用于设置类的组件：

@HostBinding('class.dark-1') true;

哪个工作正常。但是，现在我需要在我的组件中创建一个函数来动态更改类。

例如，从dark-1到light-2单击组件中的按钮时。

我知道如何创建函数并从按钮调用它，但是如何更改主机绑定中的类并使用新类刷新 UI？

I read that its better to use @HostBinding instead of :host. So i think about change my component.ts

This works fine, but when i change it to:

i get errors and nothing works. What i did wrong here? And how can i make the variable uploadProgress to a observable?

我已经@HostBinding在我的 Angular 6 应用程序中成功使用将属性应用到主机组件，就像在变量为真时应用类一样：

@HostBinding('class.compact-ui') isCompact;

但是，现在我需要根据选择菜单的模型分配 4 个可能的类之一。例如，用户可以red、blue或green。

我想我可以在任何颜色为真时使用多个主机绑定：

@HostBinding('class.green-ui') uiColor === 'green';

但这似乎是错误的。这样做的正确方法是什么？

I have Angular 6.0.0 application. Need to dynamically append classes to html elements. Ideally, this should be implemented via directive. Currently I have something like this and it works OK.

I want to make the prefix reusable and I am trying to reach the better result by using a directive:

html:

appendBusinessLogicClass.directive.ts:

But the HostBinding CLEARS class1 in the html code. But I'd like to APPEND 'prefix-rand' to the class list. Note, that we do not know variable at the compile time.

Thanks

我有一个app-layout为我的页面保存 sidenav 和路由器插座的组件：

这app-layout有一个可以HostBinding在其上设置一个类（sidenav 的存在与否需要通过 css 更改几件事）。

加载到路由器出口的组件需要有一个按钮来切换 的值，hasSidebar以便应用或不应用该类。

所以，我设置了一个服务来保存布尔值

我将它添加到上面的app-layout组件中，就像这样

手动更改布尔值（在代码中）表明它有效。但现在我需要从其他组件切换这个值。在另一个组件中，我有：

我在这个组件中创建了一个按钮来调用该toggleSidebar函数。

但是，app-layout组件的主机绑定不会更新，并且类不会切换。

我错过了什么？我猜app-layout组件目前无法“知道”我已经更改了变量。但我不知道如何绑定它。我找到了这个 Stackblitz，但它是针对绑定字符串的——如何用 HostBinding 做同样的事情？

我正在一个非常简单的例子上研究 Angular 6。

我正在创建一个指令，我可以将它放在我的 textareas 上，以便它们自动调整大小。

但是，我在使用主机绑定时遇到了问题。我想在调整大小之前检查是否需要调整大小，但我无法检查：this.height 默认为 undefined。

更糟糕的是，如果它已经手动调整大小，this.height 仍然是未定义的。

我尝试在@HostBinding 之上使用@Input 装饰器，但这只是设置了一个初始值，然后在调整大小时，高度与元素的实际大小不再匹配。

我似乎无法找出为什么它不起作用，你能帮忙吗？

我也意识到我正在尝试做的另一种方法是将我的指令的高度设置为本机元素的滚动高度而不事先检查，但是我不明白为什么我的高度值是未定义的/doesn' t 动态更新。

这是我的代码：

simple.component.html

simple.component.ts

自动调整大小文本area.directive.ts

谢谢你的帮助

在我的 TSLint 文件中，我有：

在我的组件中，我有时会：

因为classes是私有的，所以 TSLint 会抱怨，所以我每次都必须禁用 TSLint。

我不想@HostBinding因为封装而公开。

解决此问题的推荐方法是什么？