Question

最新版本的Angular cli是否支持内联模板和组件的css？我再也看不到--inline-template选项了吗？

Answer 1

在angular-cli.json文件中，您可以指定是否希望文件具有内联css和模板。

您可以在此处找到可在配置文件中指定的所有选项。

https://github.com/angular/angular-cli/wiki/angular-cli

这样，当你使用ng generate component时，它将使用默认值。

{
    "project": {
      "version": "1.0.0-beta.22-1",
      "name": "client"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "build",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.json",
        "prefix": "ws",
        "mobile": false,
        "styles": [
          "styles/main.scss"
        ],
        "scripts": [],
        "environments": {
          "source": "environments/environment.ts",
          "prod": "environments/environment.prod.ts",
          "dev": "environments/environment.dev.ts"
        }
      }
    ],
    "addons": [],
    "packages": [],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "scss",
      "prefixInterfaces": false,
      "inline": {
        "style": true, <<<--- CHECK IT OUT!!
        "template": true
      },
      "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
      }
    }
  }

Answer 2

在当前版本的CLI（版本6）中，我刚刚使用ng new foo -s -t创建了一个新项目。 -s和-t将内联模板和内联样式的默认值设置为true。然后，我打开angular.json，看一下它做了什么。

在每个应用程序的"project"属性内...有一个"schematics"属性。在其内部，添加了以下内容：

"@schematics/angular:component": {
    "inlineTemplate": true,
    "inlineStyle": true
}

如果添加它，然后尝试生成组件，则模板和样式将默认为内联。

Answer 3

我正在使用Angular CLI：10.1.3

您可以使用cli "ng g c component-name -is -it"创建具有内联样式和内联模板的组件。

g-生成
c-组件
是-内联样式
它-内联模板

您还可以使用"ng generate component component-name -is -it"

Angular Cli支持内联模板和css

3 个答案: