小编Lin*_*der的帖子

我的Angular项目正在增长,所以我想让我的项目保持清洁.

我有一个Angular组件,它取决于嵌套的Angular组件.

现在我需要两个import语句来使用这些组件,这些组件在相互之间无法工作.

作为一个解决方案,我想创建一个包含这两个组件的小型Angular模块,并将模块导入到我的主app.module中.

执行此操作后,我收到一个错误,指出小模块中的一个组件无法识别.

//app.module.ts
@NgModule({
    imports: [BrowserModule, HttpModule, DictaatModule],
    declarations: [AppComponent, DictatenComponent, FilePreviewComponent],
    bootstrap: [AppComponent]
})


//Dictaat.module.ts
import { DictaatComponent } from './dictaat.component';
import { DictaatEntryComponent } from './dictaat-entry.component';

@NgModule({
    imports: [BrowserModule, HttpModule],
    declarations: [DictaatComponent, DictaatEntryComponent],
})
export class DictaatModule{ }

我的问题:将多个组件分组到一个模块中是一个好习惯吗？Angular中是否已经支持这个功能？

PS.我正在使用Angular 2.0.0,而不是任何RC.我的设置可与英雄之旅教程的设置相媲美.

编辑:源代码 https://github.com/Linksonder/Webdictaat/

错误消息:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'.
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then …

我已经尝试了很多stackoverflow选项,例如动态加载现有组件Angular 2 Final Release.

我想要做的是获取一个带有ajax请求的html页面,并在我的自定义组件中呈现/编译此模板.

我已经发现angular2有两个不赞成使用的组件,我必须使用ComponentFactoryResolver.

在我的旧解决方案中,我可以设置'[innerHtml]'来呈现HTML.现在我需要一个新的解决方案.

谁能帮助我？

page.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactory, OnInit, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';


@Component({
    selector: "wd-page",
    templateUrl: "/app/page/page.component.html",
    providers: []
})
export class PageComponent implements OnInit {

    // we need the viewcontainer ref, so explicitly define that, or we'll get back
    // an element ref.
    @ViewChild('dynamicChild', { read: ViewContainerRef })
    private target: ViewContainerRef;

    private page = {
        Source: "<div><h2>Hello world</h2><one-of-my-components></one-of-my-components></div>"
    }


    constructor( …

将我的项目更新到最新版本的Angular(6.0.4)后,我想最终将我的代码分成不同的库.

设置如下:

1. CMS - 应用程序
2. 客户 - 应用程序
3. 核心 - 两个应用程序共享成员的库

我创建了3个空项目,并开始将所有组件和服务移动到正确的文件夹中.在最终完成所有这些编辑并删除TS错误后,我的构建仍然失败.好像我的CMS应用程序找不到我库中定义的任何模块,组件或服务.我的库正在构建,似乎包含所有这些元素.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '**\Webdictaat.Client\dist\core\core' in '**\Webdictaat.Client\projects\cms\src\app'

我的库包含一个public_api.ts,看起来它正常工作但生成的core.ts文件不包含所有导出的成员.例如,wd-core.module位于public_api.d.ts的第二行

真正的问题:我的图书馆出了什么问题,并非所有成员都出口了？

//dist/core/public_api.d.ts
export * from './lib/avatar/avatar.component';
    export * from './lib/wd-core.module'; 
export * from './lib/modal-component/modal-component.component';
export * from './lib/game-elements/game-elements.module';
export * from './lib/core/html-outlet.directive';
export * from './lib/services';
export * from './lib/models';

//dist/core/core.d.ts
//No wd-core.module :(
/**
 * Generated bundle index. Do not edit.
 */
export * from './public_api';
export { BaseModalService as …

我目前正在尝试将我的 Angular 2.something 项目升级到最新版本。我有一个自定义的 angular.config 文件，因此我可以构建 2 个使用相同组件“库”的应用程序。但随后 Angular 6 的史诗版本发布了真正的 Angular 库！但是现在我被困（再次）试图将我的项目重构为这个新版本。

我已经将组件库（名为“核心”）构建到 DIST 文件夹中。甚至 Typescript 也可以使用这个库。但是当我尝试构建我的网络应用程序 Angular CLI 时，它开始抱怨它找不到模块“核心”。

以下代码片段是文件夹 dist/core 中的 public_api.d.ts：

export { WdCoreModule } from './lib/wd-core.module';
export { wdApi } from './lib/core/wd.service';
export { ProcessTokenComponent } from './lib/core/process-token.component';
export { GroupByPipe } from './lib/core/group-by.pipe';
export { AvatarComponent } from './lib/avatar/avatar.component';
export { GameElementsModule } from './lib/game-elements/game-elements.module';
export { AchievementsComponent } from './lib/game-elements/achievements/achievements.component';
export { ModalComponentComponent } from './lib/modal-component/modal-component.component';
export { BaseModalService, BaseModalComponent } from './lib/core/basemodal.service'; …

ELLO,

我已经尝试了所有选项来制作一个带有optgropus的(多个)选择框,并将选项/ selectedOptions与knockout绑定.

selectedOptions绑定似乎存在问题.我的数据似乎是合法的,但它不会显示预选的选项.

我在JSFiddle中做了一个例子:http://jsfiddle.net/aCS7D/251/

<select data-bind="selectedOptions: selectedOptions" multiple="multiple">
<option>Please choose an option</option>
<optgroup data-bind="repeat: groups" data-repeat-bind="attr: {label: $item().label}">
    <option data-bind="repeat: $item().children" data-repeat-bind="text: $item().label, option: $item()"></option>
</optgroup>

使用单个选定选项它可以工作,但是有多个选择选项,选择框不能正确渲染它们.

如果任何人有解决这个问题的方法,你将成为我的英雄!