如何使用Angular CLI在特定文件夹中生成组件?

我正在使用Angular 4和Angular CLI，我可以用下面的命令创建一个新组件。

E:\HiddenWords>ng generate component plainsight

但我需要在plainsight内生成一个子组件。有办法用Angular CLI来实现吗?

501421 次浏览
小开

ng g component plainsight/some-name在使用时生成新目录。

最终输出将是:

plainsight/some-name/some-name.component.ts

为了避免这种情况，使用平的选项 ng g component plainsight/some-name --flat，它将生成文件没有，从而创建一个新文件夹

plainsight/some-name.component.ts
小开

更短的代码生成组件:ng g c component-name
ng g c specific-folder/component-name


附加信息
生成指令的更短代码:ng g d directive-name
来指定它的位置:ng g d specific-folder/directive-name

小开

ng g c component-name

用于指定自定义位置:ng g c specific-folder/component-name

这里component-name将在特定文件夹中创建。

类似的方法可以用于生成其他组件，如directive， pipe， service， class， guard， interface， enum， module等。

小开

有几种方法可以在特定目录中创建组件。

方法一:“在综合终端开放”;-快速，简单，无错误的方法

例如，你想在app/common文件夹中创建一个组件，如下图所示，然后按照以下步骤操作

  1. 右键单击要在其中创建组件的文件夹。
  2. 选择选项Open in Integrated Terminal或Open in Command Prompt。
  3. 在新终端中(你会看到你选择的路径)，然后输入ng g c my-component
你也可以通过这张图片来检查这个过程 enter image description here < / p >

方法二:“复制相对路径”;并粘贴在终端上

  1. 右键单击要在其中创建组件的文件夹
  2. 从上下文菜单中，选择Copy Relative Path
  3. 在终端上，键入cd，按空间，然后按ctrl + v粘贴复制的路径，然后按输入
  4. 您将看到目录已被更改。
你也可以通过这张图片来检查这个过程 enter image description here < / p >

方法三:在终端上输入完整路径

例如，你想在某个文件夹中创建component，你输入整个命令，包括路径和组件名称。

ng g c relative-path/my-component
你也可以通过这张图片来检查这个过程 enter image description here < / p >

备注(方法3): angular不允许你在app文件夹外创建组件，因此对于component，你的基本路径将是app，这就是为什么在我的例子中，我必须从auth/a-component开始，而不是src/app/auth/a-component

小开

简单的

ng g component plainsight/some-name

它将创建“plainsight”文件夹，并在其中生成某个名称的组件。

小开 
ng g c folderName/SubFolder/.../componentName --spec=false
小开

试着使用

ng g component plainsight/some-name.component.ts

如果你觉得更舒服的话，也可以手动试试。

小开

在命令提示符或项目终端中转到项目文件夹。

执行cmd: ng g c componentname命令

enter image description here

小开

我对上面的答案(包括--flat)没有任何运气，但对我有用的是:

cd path/to/specific/directory

从那里，我运行ng g c mynewcomponent

小开

一旦你在你的项目的目录。 使用cd path/to/directory，然后使用ng g c component_name，它将自动执行所有操作，并且无错误

g c表示生成组件

小开

Angular CLI提供了应用开发中需要的所有命令。对于您的特定需求，您可以轻松地使用ng g (ng generate)来完成工作。

ng g c directory/component-name将在directory文件夹中生成component-name组件。

下面是您可以在应用程序中使用的一些简单命令的映射。

  1. ng g c comp-name或ng generate component comp-name来创建一个名为'comp-name'的组件
  2. ng g s serv-name或ng generate service serv-name创建名为'serv-name'的服务
  3. ng g m mod-name或ng generate module mod-name来创建一个名为'mod-name'的模块
  4. ng g m mod-name --routing或ng generate module mod-name --routing来创建一个带有angular路由的名为'mod-name'的模块

希望这能有所帮助!

好运！

小开

首先创建一个组件，你需要使用:-

  • ng g c componentname

    使用上述命令，新组件将创建在一个
    的文件夹中

但是如果你需要在另一个组件中或在特定的文件夹中创建一个组件:-

  • ng c componentname/newComponentName . ng c componentname/newComponentName . ng c
小开

如果你使用VSCode，可以考虑使用角控制台

它为Angular CLI提供了一个接口。您将看到一个用于指定路径的选项。

Angular CLI是非常强大和可扩展的。事实上，有如此多的功能，对于开发人员来说，为每个命令提供所有不同的配置选项是很有帮助的。

有了Angular Console，你会得到推荐，甚至可以找到最容易忘记或很少使用的特性!

首先，Angular Console是一种更高效地使用Angular CLI提供的功能的方式。

小开

上面的选项不适合我，因为与在终端中创建目录或文件不同，当CLI生成一个组件时，它默认将路径src /应用程序添加到您输入的路径中。

如果我从主应用文件夹中生成组件像这样(错误的方式)

ng g c ./src/app/child/grandchild

生成的组件是这样的:

src/app/src/app/child/grandchild.component.ts

所以我只需要打字

ng g c child/grandchild

希望这对大家有所帮助

小开

使用自定义目录时需要使用——dryRun

你可以通过ng命令传递你的自定义目录路径。

ng g c myfolder\mycomponent

但是有可能你拼写错误了路径，或者创建了新的文件夹，或者目标目录改变了。因此，dryRun非常有用。它显示了将如何影响更改的输出。
enter image description here < / p >

在验证结果之后，你可以在没有-d的情况下运行相同的命令来进行更改。

——dryRun = true |假

当为true时，运行并报告活动而不写入结果。

默认值:假

别名:- d

官方文件:- https://angular.io/cli/generate

小开

要在VS code中打开终端，只需输入CTRL + ~，这将打开终端。以下是步骤:

  1. 检查需要生成新组件的特定组件。

  2. 将路径重定向到需要生成另一个组件的特定文件夹/组件

例如:__abc0

在particularComponent的位置，键入需要生成新组件的组件名称。

  1. 进入需要生成新组件的组件后，只需键入以下命令:ng g c NewComponentName

(将名称NewComponentName更改为所需的组件名称。)

小开

在一个特定的文件夹中创建一个组件:

ng g c folder-name/component-name

使用Angular-CLI在特定(现有)模块的文件夹中创建一个组件:

ng g c folder-name/component-name --module=folder-name/moduleName.module.ts
小开

超级简单，

enter image description here

其他方式,

在终端打开文件夹，

* * xxx \ FOLDER_NAME> cd FOLDER_NAME

xxx \ FOLDER_NAME>Ng生成组件平视

如果你像我一样复制路径(Visual studio代码)，

enter image description here

小开

使用'ng generate component ./target_directory/Component_Name'

小开

2021进一步加快IDE插件的使用

如果你想进一步加快这个通常的过程，并避免花费你时间的常见错误，你可以尝试使用visual studio代码插件。

例如，我使用Angular-Schematics并且避免使用终端。你可以用鼠标选择调用ng cli。

enter image description here

小开

使用此命令打开特定的文件夹Terminal

Ng g c组件名称——flat

小开

假设你想要在模块Box中创建一个组件Container，并且模块已经创建并存在于它自己的文件夹src/app/box中。

您可以这样做——当被要求提供组件名称时，提供组件的路径和组件名称。

ng g c -m box
? What name would you like to use for the component? box/Container
CREATE src/app/box/container/container.component.scss (0 bytes)
CREATE src/app/box/container/container.component.html (24 bytes)
CREATE src/app/box/container/container.component.spec.ts (647 bytes)
CREATE src/app/box/container/container.component.ts (288 bytes)
UPDATE src/app/box/box.module.ts (286 bytes)

提交答案