标签: angular-module

我试图理解Angular(有时称为Angular2 +),然后我遇到了@Module:

1. 进口

2. 声明

3. 供应商

遵循Angular快速入门

我有使用angular-cli生成的Angular 2(版本2.0.0 - 最终版)app.

当我创建一个组件并将其添加到AppModule声明数组时,它一切都很好,它可以工作.

我决定将组件分开,所以我创建了TaskModule一个组件TaskCard.现在我想用TaskCard在的组成部分之一AppModule(的Board成分).

的AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { BoardComponent } from './board/board.component';
import { LoginComponent } from './login/login.component';

import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdToolbarModule } from '@angular2-material/toolbar';

import …

我正在尝试在其他模块中使用我在AppModule中创建的组件.我收到以下错误:

"未捕获(承诺):错误:模板解析错误:

'contacts-box'不是已知元素:

1. 如果'contacts-box'是Angular组件,则验证它是否是此模块的一部分.
2. 如果'contacts-box'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.

我的项目结构很简单:

我将页面保存在页面目录中,每个页面保存在不同的模块中(例如客户模块),每个模块都有多个组件(如customers-list-component,customers-add-component等).我想在这些组件中使用我的ContactBoxComponent(例如,在customers-add-component内部).

如您所见,我在widgets目录中创建了contacts-box组件,因此它基本上位于AppModule中.我将ContactBoxComponent导入添加到app.module.ts并将其放入AppModule的声明列表中.它没有用,所以我搜索了我的问题,并将ContactBoxComponent添加到导出列表中.没有帮助.我也尝试将ContactBoxComponent放在CustomersAddComponent中,然后放在另一个(来自不同的模块)中,但我得到一个错误,说有多个声明.

我错过了什么？

我正在寻求有关在 Angular 14 中使用独立组件和模块的最佳实践的澄清。考虑到独立组件作为 Angular 中的一个新概念引入，我正在寻找由引文或参考文献支持的事实指导。

我仅使用具有延迟加载路线的独立组件创建了一个新的整个应用程序，并且一切都运行良好。这里是仓库： https: //github.com/Ismaestro/angular-example-app

然而，我很好奇这是否表明可能会转向独立组件，从而导致 NgModule 过时。

有人可以提供基于证据的见解，了解在 Angular 14 中使用独立组件与模块的优缺点吗？

感谢你的贡献。

我正在学习Angular 2+,我很难理解导入/导出在ngModule中的作用.更具体地说,如果您要使用es6语法导入模块,为什么导入模块很重要

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ]
})

通过es6语法检测模块是不是更简单？

导入 - 此模块中声明的组件模板需要导出类的其他模块.

但是我们已经在组件级别上导入了那些.我错过了什么吗？我也在寻找他们为什么选择这种语法的一些例子.

我有一个使用角度十进制管道的自定义十进制格式管道.此管道是共享模块的一部分.我在功能模块中使用它,并在运行应用程序时没有提供程序错误.

如果有任何拼写错误,请忽略.

./src/pipes/custom.pipe.ts

import { DecimalPipe } from '@angular/common';
..
@Pipe({
    name: 'customDecimalPipe'
})
...
export class CustomPipe {
constructor(public decimalPipe: DecimalPipe) {}
transform(value: any, format: any) {
    ...
}

./modules/shared.module.ts

import  { CustomPipe } from '../pipes/custom.pipe';

...

@NgModule({
  imports:      [ .. ],
  declarations: [ CustomPipe ],
  exports:    [ CustomPipe ]
})
export class SharedModule { }

我在其中一个组件中注入自定义管道并调用transform方法来获取转换后的值.共享模块导入到功能模块中.

我创建了Angular Library(ngx-wig),我希望能够通过使用插件来扩展其功能.

什么是在Angular中声明插件的最佳位置？(可能是这样的myLibModule.forRoot(..))和插件本身应该是什么类型的实例？

我通过使用主模块的configProvider为每个插件添加模块,为AngularJs 解决了同样的问题.不太喜欢这个解决方案,因为插件会自行注册,但它应该是使用库的应用程序的责任.

UPDATE:相关的问题被打开GitHub上这里.

我的Angular应用程序模块有以下路由路径:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'documents',
                data: { myObject: MyConstants.OPTION_ONE },
                children: [
                    {
                        path: ':ID_DOC',
                        children: [
                            { path: 'edit', component: EditDocumentComponent },
                            { path: '', component: DocumentDetailsComponent },
                        ]
                    },
                    { path: 'add', component: AddDocumentComponent },
                    { path: '', component: DocumentsListComponent }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class DocumentsManagementRoutingModule {
}

正如您所看到的,我使用dataproperty将一些数据传递给"documents"中的每个路径,因此我可以从路由路径中声明的任何组件中获取它:

例如,以下是我如何获取数据DocumentDetailsComponent:

export class DocumentDetailsComponent implements OnDestroy {
    private obsData: Subscription;
    private option: any;

    constructor(private route: …

我最近使用了angular.js,但我需要一个关于Directives的小解释.

如何在不将其链接到特定模块的情况下创建指令,并且可以在任何模块中使用,例如内置指令.

假设存在一个用普通Javascript编写的Javascript库,并且常用于vanilla,非框架网站.如何创建一个可以轻松npm install编辑的Angular库,使库无缝地在Angular应用程序中使用？

我无法在Angular文档或更广泛的网络上找到任何关于此过程的良好演示.

例如,有一个很棒的Javascript库被调用p5.js,这与Angular一起使用并不简单.如何创建一个Angular模块,您可以将其简单地导入到您自己的Angular模块中,并使用Angular支持的所有强大功能？