Angular -如何使用Angular CLI创建子组件
Angular是一种流行的前端开发框架，它使用TypeScript编写，并由Google维护。Angular CLI（命令行界面）是一个强大的工具，用于创建、构建和管理Angular项目。
要使用Angular CLI创建子组件，可以按照以下步骤进行操作：
- 确保已经安装了Node.js和npm（Node.js包管理器）。
- 打开命令行界面，并运行以下命令来安装Angular CLI：
- 打开命令行界面，并运行以下命令来安装Angular CLI：
- 创建一个新的Angular项目。在命令行界面中，导航到要创建项目的目录，并运行以下命令：
- 创建一个新的Angular项目。在命令行界面中，导航到要创建项目的目录，并运行以下命令：
- 这将创建一个名为"my-app"的新Angular项目。
- 进入项目目录：
- 进入项目目录：
- 创建一个子组件。运行以下命令：
- 创建一个子组件。运行以下命令：
- 这将在项目中创建一个名为"my-component"的子组件，并自动更新相关文件和代码。
- 在需要使用子组件的地方，可以通过在HTML模板中添加以下代码来引入子组件：
- 在需要使用子组件的地方，可以通过在HTML模板中添加以下代码来引入子组件：
- 这将在页面上显示"my-component"子组件。
以上步骤是使用Angular CLI创建子组件的基本过程。通过使用Angular CLI，可以快速、方便地创建和管理Angular项目及其组件。更多关于Angular CLI的详细信息和用法，请参考腾讯云的Angular CLI产品介绍页面：Angular CLI产品介绍。
相关·内容
我已经使用Angular CLI创建了一个Angular应用程序，并创建了一个组件：ng g c parent。 如何创建子组件(例如child1和child2)，并使用angular CLI将它们与父组件集成？ 我正在尝试创建一个简单的示例，并在一些示例中理解父组件与子组件的关系。
浏览 38提问于2019-01-04得票数 1
回答已采纳
不确定为什么组件不能分配给@component的声明性属性。父语句中的此语句(指令: ChildComponent)引发编译错误。我的代码的目的是将一个数据值从父传递给子。我听说RC6声明不起作用，所以我在ngModule声明中声明了子组件，编译错误被解决了，但无法在子视图中获取数据。
Parent component:
import { Component } from '@angular/core';
import {ChildComponent} from './child-input.component'
@Component({
selector
浏览 1提问于2017-11-24得票数 1
1回答
我是新的角度环境和创建一个项目使用引导4+角材料。我使用"material.module.ts“进口-出口所有必要的材料组件。
当我使用"ng服务“命令运行应用程序时，它没有显示任何错误，并且工作正常。当我使用--aot参数进行生成或为生产构建(ng build )时，它会产生错误：
ERROR in Illegal State: referring to a type without a variable {"filePath":"D:/ff/node_modules/@angular/material/form-field/typings/i
浏览 2提问于2019-08-24得票数 0
3回答
我正在使用一个基于Angular-CLI框架的Angular 2应用程序，我习惯于将我的src文件夹按模块组织成一个目录，并且每个与该模块相关的组件都在同一个文件夹中。
src
app
documents
document-list.component.ts
document-list.component.html
documents.component.ts
documents.component.html
document.module.ts
浏览 0提问于2016-12-23得票数 27
回答已采纳
我现在正在学习使用Angular 4和angular-cli来构建一个web前端(好吧)。
当我创建应用程序并开始用我自己的数据模型模仿Heroes教程时，我创建了一些组件，但它们-至少是出现在主页上的那些组件-都放在根app组件中。当我ng generate component时，它被放在应用程序one中，这让我认为这是有意的方式。
如果是这样，我应该如何路由应用程序而不关闭应用程序根组件？我不知道组件是如何与路由一起工作的吗？
我不希望这个问题过于宽泛，所以我将尝试集中讨论这一点:如何构建更改组件的子组件而不是主组件本身的路由？
浏览 0提问于2017-11-29得票数 0
当我处于开发模式时，在IDE中的代码更改后(有时)，我会收到以下控制台警告消息：
WARNING in AngularCompilerPlugin:
Forked Type Checker exited unexpectedly.
Falling back to type checking on main thread.
基于Angular 6和Angular-cli 6的项目，更精确的版本：
"@angular/cli": "6.0.8" "@angular/*": "6.0.4"
我正在使用node v8.11.3和npm v
浏览 6提问于2018-08-20得票数 5
我刚刚运行了一个npm install @angular/编译器-cli@10.0.5
我期望安装一个单独的包。NPM报告：
@angular/compiler-cli@10.0.5
updated 3 packages and audited 2595 packages in 99.636s
除了更新的编译器-cli包之外，我如何知道哪些包被更新了？
浏览 1提问于2021-09-24得票数 0
我正在创建一个Ionic / Angular的Ionic应用程序。我创建了一些页面，它运行得很好。但是现在我正在尝试创建一个组件，但是我不能使用*ngFor命令。
我用Ionic cli创建了组件。这是我的HTML：
<ion-item button *ngFor="let myItem of myCollection">
(...)
</ion-item>
我已经在一个页面中使用了ngFor，它可以工作，但是在组件中我得到了以下错误：
core.js:10140 NG0303: Can't bind to 'ngForOf&#
浏览 3提问于2021-09-21得票数 0
回答已采纳
我想知道是否有可能切换一个主题(2个样式表)。我的实际配置是angular-cli.json配置中的样式表A。我想要做的是用一个简单的(单击)切换器将样式表A替换为样式表B。
如果我要在index.html中导入样式表，代码将如下所示
组件：
constructor() { }
toggleTheme() {
this.darkTheme = this.lightTheme;
}
Index.html
<div [class.dark]="darkTheme">
<div [class.light]="lightTheme"&
浏览 0提问于2017-11-02得票数 3
2回答
我有一个现有的项目，我想使用angular cli生成器，所以在安装并创建以下.angular-cli文件后：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "app"
},
"apps": [
{
"root": "src/mc2/components",
"prefix&#
浏览 0提问于2017-10-25得票数 0
我是Angular 4和Angular-CLI的新手。我找不到任何解决方案，如何使用整个应用程序的根scss/css文件。因此，我的问题是，如何在项目中使用全局scss文件？
浏览 31提问于2017-03-29得票数 7
回答已采纳
我正在使用Angular 4和Angular CLI，并且我可以使用以下命令创建一个新组件。
E:\HiddenWords>ng generate component plainsight
但我需要在plainsight中生成子组件。有没有办法用Angular CLI做到这一点？
浏览 6提问于2017-10-20得票数 314
我有两个组件：A和B。组件B是A的子组件。我将一个函数从A传递给B，以访问和更新B中A的一些属性。当我这样做时，Angular不会重新渲染(如果我从A调用相同的函数，它将会重新渲染)。
为了解决这个问题，我在其run中注入了NgZone来进行更新，但它不会被注入。我用ApplicationRef和ChangeDetectorRef尝试了同样的方法，但它们都没有被注入(我得到了Cannot read property 'run' of undefined)。
A.component.ts
@Component({
selector: 'app-A',
te
浏览 1提问于2020-04-21得票数 1
1回答
我用ng cli创建了一个全新的角项目，但没有添加任何内容。然后我跑了
ng build -prod -vc=true -sm -oh=none
我用源地图探险家来看看树被摇晃了什么。我看到了一堆我没有使用的rxJ东西，比如可观察的，合并映射等等。这正常吗？这是因为其他节点模块都在使用它吗，比如角？是我14%的供应商包吗？
Angular CLI: 1.5.0
Node: 6.11.0
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, langua
浏览 0提问于2018-01-31得票数 1
回答已采纳
2回答
我使用CLI创建了一个新的角项目和一个新的模块。如果我试图在app.module.ts中导入新创建的模块，则Intellisense无法工作，并且无法找到自动导入它的模块。我没有改变tsconfig.json文件中的任何内容。
角CLI: 10.0.4
节点: 12.16.3
角度: 10.0.5
打字本: 3.9.7
与代码: 1.47.3
知道是什么导致的吗？
编辑:手动导入很好，但我询问的是自动导入功能。
import { NgModule } from '@angular/core';
import { CommonMod
浏览 5提问于2020-07-28得票数 3
回答已采纳
2回答
在我们开始之前，我大约在一周前开始学习Angular，不要害怕把它带回基础知识。
那么你是怎么做的呢？在app.component.ts中，我有一个标准数组，它需要可以被多个子组件访问。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
masterArray = ['Create',
浏览 1提问于2017-07-18得票数 5
我正在使用Angular Cli创建组件。
我使用这个命令：
ng g c DeviceComponent --module=./views/administration/Accounting.module.ts --spec=false --flat
我得到了警告：
Option "entryComponent" is deprecated: Since version 9.0.0 with Ivy, entryComponents is no longer necessary.
并且组件没有创建我的Angular版本是：
Angular CLI: 10.2.0
Node:
浏览 0提问于2020-11-13得票数 4
NativeScript命令行界面未创建任何组件。 在使用CLI创建应用程序之后，我尝试创建组件，例如"ng g c test“。 没有创建任何内容。 不显示任何信息。 它只是返回下一个提示符。 请注意，我能够使用Angular CLI在我的机器上为Angular项目创建组件。 有关使用NativeScript命令行界面所发生的情况，请参见以下屏幕截图： ?
浏览 4提问于2019-02-07得票数 0
1回答
我遇到了一个有趣的问题:当在另一个页面中包含一个组件或页面时，似乎没有触发ionViewCanEnter。如果您直接访问一个页面，它会触发，但是使用它的选择器将它包含在另一个页面中，则不会触发它。我试着制作一个组件，并将其包含在页面中，但它不起作用。我需要一个关于两个页面的特殊视图，并试图重用代码，决定将我的代码移到组件中，并将其包含在两个页面中，但问题是HTML模板调用函数，该函数需要一些异步数据才能响应，所以在收到数据之前，我需要将视图保留下来。对如何解决这个问题有什么想法吗？
这是我的组成部分：
import { Component } from '@angular/core&#
浏览 1提问于2018-07-19得票数 2
3回答
教程中角分量的故障
、、、、
我在读曼宁的“行动中的角度”。第二章告诉我如何编写我的第一个组件，但是这个例子已经过时了。我想不出怎么更新它。我使用的是角CLI版本7.1.3。
角CLI生成以下内容：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.scss']
}
浏览 0提问于2018-12-28得票数 1
回答已采纳
8回答
当使用ng g c my-component生成一个新组件时，我会得到以下错误：
找不到NgModule。使用skip选项在NgModule中跳过导入。
如果我然后使用跳过导入选项角将在我的e2e文件夹中生成组件。
我假设这与我的angular.json文件有关，该文件在我运行ng升级之前曾被称为angular-cli.json，这无疑是造成问题的原因，因为似乎出现了一些结构性变化。
有没有办法解决这个问题，而不使用CLI创建一个新项目，然后手动复制文件..？
ng g c从根“my”文件夹中运行。
文件夹结构：
my-app
- dist
- e2e
- node_module
浏览 0提问于2018-06-17得票数 5
回答已采纳
在使用angular-cli创建新组件时，预期的行为是使用描述新创建的组件的条目更新angular.json.projects。观察到的行为是angular-cli没有这样做。
在运行ng test newComponent并接收到消息Project 'inline' does not support the 'test' target.之后，我发现了这一点。
在我更新ng test newComponent来描述新创建的组件之后，angular.json.projects就开始工作了。
我正在将一个角2组件库迁移到新的角7工作区模型。我正在使用Todd的配方从
浏览 1提问于2019-05-19得票数 2
我试图按照下面的示例webpack5模块联合在中实现微前端概念，但是我面临着这个错误。
我尝试了这个答案中提供的解决方案，但是它没有起作用。
目前，我正在使用角版本11在这两个应用程序。
正在导入的应用程序的package.json (子)
"resolutions": {
"webpack": "5.0.0"
},
"dependencies": {
"@angular/animations": "11.0.0-next.6",
"@angul
浏览 3提问于2020-11-25得票数 3
我已经建立了一个angular-cli项目
(@ Angular / cli: 1.0.0-rc.2 node: 6.10.0 os: linux x64)
使用电子js (v1.6.2)，我需要使用文件系统来创建/删除.csv文件和文件夹，但我不能在angular组件中包含
如何配置angular-cli使其能够:从' fs‘导入fs？
浏览 4提问于2017-03-21得票数 6
在使用ng g/my-组件创建组件时出错。
‘出现了一个未处理的异常: catch子句变量不是一个错误实例，请参阅“路径到文件\角-错误.日志”以了解更多细节。
文件包含在堆栈跟踪下面：(C:\Users\sam\node_modules@angular\cli\src\utilities\error.js:16:26) AssertionError ERR_ASSERTION: catch子句变量不是assertIsError、GenerateCommandModule.runSchematic、GenerateCommandModule.runSchematic、GenerateComm
浏览 11提问于2022-07-25得票数 5
我有一个Angular CLI应用程序，可以显示许多D3.v5视觉效果。我想在这些D3显示上添加的一些工具提示非常重要，我想利用Angular的模板和数据绑定的强大功能。
我能找到的唯一远程连接资源是。我看过代码了。它依赖于D3 v4和Angular v5，已经相当过时了。
在D3上下文中，如何使用Angular组件作为数据驱动的工具提示？
浏览 22提问于2020-05-20得票数 1
回答已采纳
2回答
我正在开发一个使用angular-cli接口的应用程序。不幸的是，现在还没有像这样的命令：
ng generate module featureModule
所以我必须手动创建模块。如何将模块添加到angular-cli生成的应用程序中?最好的做法是什么？
Angular版本: 2.0.0-rc.4
浏览 0提问于2016-09-01得票数 3
我正在寻找一种方法来创建具有多个模块的angular 6(由Angular 6 CLI可能)库，可以根据开发人员的需要导入每个模块。
到目前为止，我只找到了一些教程，这些教程描述了用几个组件创建简单的库。并且它们都必须由库NgModule导入。但目标是能够在不导入所有其他东西(组件等)的情况下将一些模块导入到生产应用程序中。从库模块中。
浏览 0提问于2018-06-24得票数 9
1回答
到目前为止，Angular 2看起来很酷，但我还是遇到了一些麻烦。问题是，我想要“迷你视图组件”，意思是一些项目(例如一个客户)的一个小视图作为一个按钮或链接。例如:一个销售列表(这部分我想弄清楚)，它包含一个客户字段，而不是只在那里显示客户id，我希望它是一个按钮，当单击一个模式窗口(引导模式)时，将显示客户的详细信息。同样的行为也适用于供应商、产品等。我试着做一个"customermini“组件。我将customer代码作为指令传递，按钮触发"getCustomer"，它触发一个服务方法并获取customer。这一切都变得“平庸”了。问题是，这个“迷你客户”组件与在
浏览 0提问于2016-12-16得票数 1
1回答
使用angular-cli创建一个新模块它只生成xx.module.ts如何生成其余的默认文件，如module1.component.ts module1.component.html module1.component.cssenter code here
请帮帮忙
浏览 3提问于2017-02-11得票数 0
我知道Angular和ASP.NET Core2的基础知识，但还不足以让我理解这个模板是如何工作的。
我尝试在Visual Studio代码中使用Angular CLI生成组件，但是，它显示我没有CLI。我认为是webpack的东西保留了CLI，并允许模板附带的所有很酷的东西，但有没有办法使用CLI尽管如此？或者，例如，我是否需要通过创建文件和添加依赖项来手动生成组件？
我找不到关于该模板的任何文档，也找不到使用它的教程。
浏览 0提问于2017-10-19得票数 9
回答已采纳
我找不到任何使用Vue-cli创建新组件的简单方法。我来自Angular，在那里我只需要输入ng g c "component name"，它就可以完成这项工作。
有没有人知道像angular cli这样简单的方法？
浏览 0提问于2018-04-09得票数 23
回答已采纳
2回答
我是第一次尝试角5单元测试。虽然我已经创建了应用程序，然后决定在其中运行测试。但是我发现了这些错误：
AppComponent should create the app
AppComponent should have as title 'app'
AppComponent should render title in a h1 tag
GalleryComponent should create
UploadComponent should create
以及错误的详细信息，如：
Failed: Template parse errors:
'app-upload&
浏览 2提问于2018-12-04得票数 2
回答已采纳
我正在处理Angular 2应用程序，在尝试使用CLI创建组件时遇到错误。 命令 ng g c mycomponent 我尝试通过执行以下操作来重新安装cli，但它似乎并不真正起作用。 ng new my-project
cd my-project
ng g c my-component --m app 错误 Your global Angular CLI version (7.2.2) is greater than your local
version (6.0.8). The local Angular CLI version is used.
To disable this war
浏览 16提问于2019-01-23得票数 0
我使用angular 2 CLI创建了我的项目。然而，我想知道如何才能停止使用疯狂的导入，比如
import { SomeSharedComponent } from '../../../shared/some-shared-component';
我正在使用angular cli为我生成的内容。那么，有没有可能使用像这样的
import { SomeComponent } from 'app/shared/components/some-component'
谢谢
浏览 0提问于2016-08-04得票数 2
2回答
我很难在新的角度项目中使用sass。我从CLI创建了带有--style=scss标志的项目，然后用"styleExt": "scss"和"styles": ["styles.scss"]更新了.angular-cli.json文件内容。项目构建是成功的，但是像xyz.component.scss这样的文件中的样式没有被编译，因此没有包含在样式包中。
我设法将组件样式文件添加到.angular-cli.json文件"styles": ["styles.scss", "./path/to/fil
浏览 1提问于2017-08-08得票数 1
回答已采纳
我正在处理Angular 6应用程序，并尝试使用命令行界面来创建新组件，使用'ng g c myComponent‘，但遇到错误 我的所有组件都在app /的module文件夹下(根级组件) 错误 Could not find an NgModule. Use the skip-import option to skip importing in NgModule. 警告消息 Your global Angular CLI version (7.2.2) is greater than your local
version (6.2.9). The local Angular C
浏览 82提问于2019-01-25得票数 0
2回答
我尝试将我的项目从angular JS升级到angular 4。我已经在angular JS项目中使用了样式表。
这是我的文件夹结构
我使用angular CLI创建了组件。一切都很完美，但是我不知道如何在angular 4项目中使用我的风格。有人能解释一下我如何在全球范围内使用我的风格吗？而且也只在某些组件中？
浏览 0提问于2017-09-22得票数 7
我对这个话题还是个新手。在我的linuxmint17中，我尝试使用Angular CLI创建Firebase web应用程序。它问我关于Angular routing的问题。
什么是Angular routing？我该怎么回答呢？
浏览 1提问于2019-03-03得票数 69
ng add ngx-通过npm为工装安装软件包。通过npm安装工具包。发生了未处理的异常:无法找到模块“@示意图/角/实用程序/配置”要求堆栈：
C:\client\node_modules\ngx-bootstrap\schematics\ng-add\index.jsC:\client\node_modules@angular-devkit\schematics\tools\export-ref.jsC:\client\node_modules@angular-devkit\schematics\tools\index.jsC:\client\node_modules@angular\c
浏览 4提问于2021-02-07得票数 3
基于对我的另一个问题()的评论，我正在尝试使用angular-cli来帮助构建和管理一个angular项目。然而，我似乎找不到任何关于如何在项目中创建第二个网页的文档，对我来说，这似乎是一个非常基本的任务。我试着用ng g component {component name}创建一个“组件”，但这并没有给构建结果增加任何东西。
浏览 0提问于2017-03-13得票数 4
回答已采纳
2回答
我就是找不到这个问题的答案。我正在使用导航栏创建一个简单的主页，但我将导航栏添加为共享组件，这样我就可以在其他组件中重用它。
问题是，当我尝试使用导航栏延迟加载新的路由时，导航栏无法加载该路由。
这是我的代码：
Ng --版本：
Angular CLI: 8.2.2
Node: 10.13.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynami
浏览 22提问于2019-10-25得票数 1
回答已采纳
我创建了一个角形4 hello世界应用程序与角CLI，我想尝试生产发行与AOT/WEBPACK构建，但我无法使它工作。我遵循了angular.io站点()中的步骤。当我构建时，得到引导错误。
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
&#
浏览 0提问于2017-05-18得票数 9
我使用nrwl创建了一个angular应用程序。现在我想在创建应用程序后设置组件、指令等的属性。
在may angular cli (no nrwl)中，设置模板内联的正确方法是
ng config schematics.@schematics/angular.component.inlineStyle true
ng config schematics.@schematics/angular.component.inlineTemplate true
该命令正确地将以下内容添加到angular.json中的属性中
{
"$schema": "./node_modu
浏览 0提问于2018-07-05得票数 2
CharacterComponent在一个不同于MenuModule的模块中。我不知道如何正确地路由到另一个模块中的组件。我希望能够将<router-outlet></router-outlet>的目标切换到不同模块中的组件。这是我所得到的，但它不起作用。
menu.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsM
浏览 0提问于2018-09-08得票数 3
回答已采纳
我正在使用create-react-app。是否有一个命令来创建一个组件来搭建文件。
现在，我正在手动创建文件。假设组件名为Button，我在component文件夹中创建一个名为Button的文件夹，然后创建Button.js和Button.css文件。
是否有使用create-react-app执行此操作的CLI命令？我知道有一种方法可以做这个Angular CLI，但我对React CLI一无所知。
浏览 22提问于2018-08-21得票数 37
回答已采纳
18回答
我通过npm安装了@angular/cli包，使用：
npm install -g @angular/cli
@angular/cli的1.4.2版本已经成功安装。这不是角度版本，而是CLI版本。
运行ng new myapp后，如何检查创建的应用程序使用的是哪个角度版本? 2.x，4.x？
浏览 11提问于2017-09-20得票数 190
回答已采纳
我有一个非常奇怪的问题，角2应用程序在火狐和所有的ios浏览器(火狐，safari)
当用户在我的应用程序中输入/reports路由时，我将通过ngOnInit方法调用rest来获取json数据。
这是我的ngOnInit方法中处理数据加载的部分：
ngOnInit() {
//this.service is my service to get reports
this.service.getReports(this.categoryId).subscribe(res => {
this.testReports = res;
}
}
当我得到响应后，我将我
浏览 1提问于2017-01-27得票数 1
1回答
我目前正在使用最新的Ionic，我很难尝试让CLI生成组件工作。
我从一个空白的proyect开始，然后用以下方法创建一个新组件：
ionic generate component my-component
该命令运行良好，并创建以下文件：
CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.
浏览 0提问于2018-10-15得票数 1
2回答
我是新来的angular
我已经使用此链接https://cli.angular.io/创建了新项目
此处显示的是来自appcomponent.html的主页
我已经在SRC >> pages >> index.html和index.ts中创建了新页面。
我在appcomponent.ts和appmodule.ts中导入这些页面
如何将默认主页设置为索引。
这是我的应用程序组件页面
import { Component } from '@angular/core';
import { Http, Headers } from '@angular/
浏览 0提问于2017-11-23得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
