Question

我正在阅读一篇关于创建组件时常见错误做法的文章。本文提到的一件事是在组件模板中添加额外的标签（如），以对组件生成的所有内容进行分组。这是不必要的，因为组件生成的所有内容都已分组到其选择器标记中。有道理，所以我想在我的代码中清理它。

所以我想使用@HostBinding将样式类应用到组件并删除不需要的标签，但它不起作用，我不确定我做错了什么。这是一个基本的例子。我尝试申请的课程来自bootstrap css。

在：

import {Component, HostBinding} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'app';
}

和模板

<div class="container">
  <div class="col-md-5">
    <h1>Welcome to {{title}}!</h1>
  </div>
  <div class="col-md-5">
    <h2>Here are some links to help you start: </h2>
    <ul>
      <li><h2>x</h2></li>
      <li><h2>y</h2></li>
      <li><h2>z</h2></li>
    </ul>
  </div>
</div>

这就像我想要的那样。容器位于屏幕中间的中心位置。

我从模板中删除了最外层的div，然后将@HostBinding添加到组件中。

后：

import {Component, HostBinding} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @HostBinding('class') className = 'container';
  title = 'app';
}

更新后的模板

<div class="col-md-5">
  <h1>Welcome to {{title}}!</h1>
</div>

<div class="col-md-5">
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li><h2>x</h2></li>
    <li><h2>y</h2></li>
    <li><h2>z</h2></li>
  </ul>
</div>

当我使用浏览器的开发工具检查生成的页面时，该类就在那里（我的app-root标签有class =＆＃34;容器＆＃34;属性），但样式是不正确的。在涉及HostBinding时，我是否遗漏或误解了什么？

Answer 1

我对您的应用做了一些假设，但我认为问题在于您可能会尝试在根组件中使用它，这意味着它会尝试在Angular没有任何控制权的父元素上设置该类。

如果您的app-root中有子组件，则可以在子组件中使用@HostBinding('class') className = 'container';为父组件（app-root）设置类。

应用类时，HostBinding无法按预期工作

1 个答案: