相关疑难解决方法(0)

我的Angular 2应用程序中有一些CSS规则,这些规则在各种组件中都很常见.显然,我不想将它们复制并粘贴到每个组件的样式中.我目前有2个想法:

1. 将常见的CSS规则放在静态CSS文件中,并使用index.html的head部分中的链接将其包含在内.
2. 将我的常用CSS规则放在一个或多个文件中,并将它们包含在@Component每个组件的装饰器中,例如 styleUrls: [ './myComponentStyle.css', '../common/common.css']

对我来说,第一种方法看起来并不那么棱角分明,但同时它确实可以工作并且易于实现.

第二个需要对每个组件进行一些工作,但允许更多地控制一个人使​​用的样式.它还允许我将我的常用样式组织成较小的样式表,并仅使用所需的样式表.

你喜欢这些解决方案还是第三个更好的解决方案？:)

我想更改ng bootstrap分页组件的样式并使用/deep/Angular 6应用程序中的链接.以下代码工作正常,但控制台显示警告,代码已被弃用.

那么,我应该如何更改它以摆脱警告？

这是我目前使用的CSS代码:

ngb-pagination /deep/ .page-item.disabled .page-link{
    background: none;
  }

 ngb-pagination /deep/ .page-item.active .page-link {
    background-color: #223C61;
    &:focus, &:visited{
      outline: none;
      box-shadow: none;
    }
  }

你们知道如何使用@HostBinding装饰器在组件中批量注入样式声明吗？我在想的是:

@HostBinding('style')
get style(): CSSStyleDeclaration {
  return {
    background: 'red',
    color: 'lime'
  } as CSSStyleDeclaration;
}

在我的理解中,这应该为组件注入背景和颜色样式,但它不...

我可以像这样控制各个样式声明:

@HostBinding('style.background') private background = 'red';

但我想为所有人做这件事,请帮助:P

这是完整的代码:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello world!</h2>
    </div>
  `,
})
export class App {

  // This works
  @HostBinding('style.color') private color = 'lime';

  /* This does not work
  @HostBinding('style')
  get style(): CSSStyleDeclaration {
    return {
      background: 'red'
    } as CSSStyleDeclaration;
  }
  */

  constructor() {}
}

和一个工作的plunker:https://plnkr.co/edit/CVglAPAMIsdQjsqHU4Fb ？ p = preview