小编Thi*_*Rao的帖子

我正在将我的项目从tslint重新配置为eslint.我可以手动运行eslint,但webpack无法运行此错误消息:

Module build failed (from /path/node_modules/eslint-loader/index.js):
Error: Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'

我已经排除了糟糕的.eslintrc.js和缺少依赖项,因为它在我手动运行时起作用./node_modules/eslint/bin/eslint.js ./ --ext .ts,.tsx --config ./.eslintrc.js

我不确定这是否是eslint-loader的上游问题.

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:jest/recommended", "prettier", "prettier/@typescript-eslint"],
  rules: {
    "react/prop-types": false
  },
  parserOptions: {
    ecmaVersion: 6,
    project: "./tsconfig.json",
    sourceType: "module"
  },
  settings: {
    react: {
      version: "detect"
    },
    linkComponents: [
      {"name": "Link", "linkAttribute": "href"}
    ]
  },
  env: {
    browser: true
  }
};

我的package.json

{
    "dependencies": {
        "@emotion/core": "10.0.6",
        "facepaint": "1.2.1", …

你们知道如何使用@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