将类传递给子组件宿主

Question

我习惯了 React 方法，我基本上可以在任何地方注入任何东西。

我在 Angular 中有一个傻瓜Button或app-button组件。它是内联块（:host类），所以它的宽度取决于内容。在这种情况下，我不能像display: block或设置宽度一样覆盖它的参数。我可以通过添加新的@Input每个参数 ( [display], [width])来手动完成，但这并不是很好。

我想要的行为是此组件上的输入/指令，以向子组件内部提供显式注入类。

在 React 中，我只需添加带有类名的 prop 并分配它或传递一些内联样式，具体取决于我使用的样式系统。

有没有办法/lib/util 来处理这个问题？

Answer 1

你不应该为父组件中的子组件元素编写 CSS 规则，因为 Angular 组件是一个独立的实体，它应该明确地声明外部世界可用的内容。如果将来子布局发生变化，分散在其他组件的 SCSS 文件中的子组件元素的样式很容易被破坏，从而使您的样式变得非常脆弱。这ViewEncapsulation就是 CSS 的用途。否则，如果您可以将值分配给面向对象编程中任何其他类的某个类的私有字段，那将是相同的。

因此，您应该做的是定义一组可以应用于子宿主元素的类，并实现子元素如何响应它们。

从技术上讲，可以按如下方式完成：

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

换句话说，您使用:hostAngular 提供的伪选择器 + 一组 CSS 类来定义子组件本身中可能的子样式。然后，您可以通过将预定义的类应用于<child>宿主元素来从外部触发这些样式。

Answer 2

由于 Angular 的ViewEncapsulation，你无法像 React 那样做到这一点。

最好的选择是直接设置按钮:host元素的样式。这样您就可以使用父组件中定义的类来覆盖它。

应用程序按钮.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    I am red by default
  `,
  styles: [`
  :host {
    background-color: red;
  }
  `]
})
export class ButtonComponent {}

应用程序组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <app-button class="button"></app-button>
  `,
  styles: [
    `.button { 
       background-color: blue; 
     }
    `
  ]
})
export class AppComponent  {}

现场演示