问题标签 [angular2-hostbinding]

我通常在我的应用程序中使用全局 SCSS 文件，但今天我想将一些 scss 限定为我的组件。

我通过@HostBinding(of class.card) 在组件上设置了一个类。

我可以在我的组件中设置项目的样式，例如caard-body，但是如何将覆盖应用到该组件的card类？

换句话说，我在页面上有几张卡片。我有一些样式，我只想应用到这张卡上，让它看起来不一样。所以我想应用css比如

所以只有这张卡是紫色的。我想让这个 css 成为这个组件的一部分，所以无论我在哪里使用它，它都会自动成为一张紫色卡片。（实际上我想要的不仅仅是一件简单的事情，但你明白了）

我的组件 TS：

我的组件 SCSS：

我的组件 HTML：

我的 CSS 中的选择器.card-body可以.card-header正常工作，但我无法设置它的样式.card。添加这个，例如，什么都不做：

如何在组件的 SCSS 文件中创建 SCSS 选择器，这些选择器也适用于通过 应用于组件的类@HostBinding？我可以吗？我是不是该？

我会很好地理解 Angular @HostBinding 的概念。不幸的是，我的书很好但是这个概念解释得不是很清楚。

请看代码：

我个人的解释：“主机绑定允许在它自己的组件内（换句话说，从我下面提到的这个文件）在主机元素（在本例中为 app-test-component 标记）中设置一些东西；在这种情况下，我将此标签的类属性设置为名为 cssClass 的变量，并带有属性“alfa”。这是对的吗？

在这种情况下，如果我在对应的 css 文件中定义了“alfa”样式，为什么在显示我的组件的页面中看不到这种样式（即背景颜色或其他东西）？

非常感谢！

编辑：我需要很好地理解这一行

您能否确认这完全等同于“将模板元素的类属性设置为分配给值'alfa'的字符串cssClass”？（或者，换句话说，与主模板标签中的指令“class='alfa'”相同）

而且，您能否也给我写一个结果相同但不使用@hostbinding 的示例？我敢肯定，在比较中看到这个等效的两个解决方案对我很有帮助。

非常感谢您的耐心等待！

闪烁正在杀死我，在阅读了所有与 jQuery 相关的线程和mdn 之后，我仍然无法弄清楚。

所以我有这个@Directive 来显示一个工具提示，这就是我将它绑定到元素的方式：

每个<span>包含文本的内容都会闪烁。每个包含 SVG 的选择器都会闪烁……有什么想法吗？

PS。不知何故el: ElementRef没有被使用，尽管我出于某种原因注入了它。尝试匹配对它的引用 - 仍然没有运气。

我正在检查一个 Angular 6 项目的源代码，并看到了@HostBinding('class')和@HostBinding('attr.class'). 我将其中一个实现从@HostBinding('class')to更改为@HostBinding('attr.class')，并没有注意到渲染结果有任何差异。两者之间有什么区别，我什么时候应该选择一种实现而不是另一种？

当@HostBinding在速记 CSS 网格属性上使用时（例如，使用grid-row代替grid-row-startand grid-row-end）绑定不起作用：

但是，使用单个属性确实有效：

这是故意的还是Angular的错误？当然，解决方法是不使用速记属性。

Stackblitz：https ://stackblitz.com/edit/angular-qfotyg

我有一个指令可以帮助向各种元素添加切换效果。

切换时它工作正常，但初始绑定值被忽略：

HTML 将反映该初始值，但该类仅在以编程方式或通过鼠标切换后应用。@HostBinding开启时是否有奇怪的交互@Input？

如果我的主/父组件具有以下内容：

我如何向内部调用的组件添加一个类？

目标是app-inner组件在呈现时呈现一个类，以便我可以在我的 CSS 中引用它，例如：

但是，这个类属性的直接放置，也没有[className]，[ngClass]似乎也没有实际添加它。

我有这个指令，我用它来动画组件高度的变化。但是自从我们从 Angular 8 更新到 9 后，它看起来几乎@grow不再支持 hostPropertyName。这是指令：

Chrome 抛出以下错误：

core.js:6185 ERROR TypeError: Cannot read property '11' of null

Safari 想出了这个：

TypeError: null is not an object (evaluating 'componentLView[RENDERER]')

和火狐：

ERROR TypeError: "componentLView is null"

关于我做错了什么以及如何解决它的任何建议？

我无法通过附加到输入的指令内的 HostBinding 将 formControl 添加到输入。请让我知道这是否是一种可能的方法，如果可以，该怎么做。

输入

指令 (searchInput)

我正在使用@HostBinding('class')将类注入宿主元素。要注入的类是根据用户提供的参数生成的。我遇到的问题是我找不到其他人遇到的问题是课程的应用顺序与我预期的方式不同。

例如，有一个组件定义如下：

当我应用如下所示的组件时：

并检查，我看到<div class="icon car"></div>的不是适当格式的<div class="car icon"></div>. 我曾尝试在加入之前反转阵列，但这也无济于事。有什么方法可以让课程以正确的顺序呈现？

编辑：我意识到课程正在按字母顺序重新排列。