我认为在Angular-cli树抖动中排除组件的问题非常相似,但我似乎无法从中得到任何东西.
基本上我有一个动态组件工厂,如我如何使用/创建动态模板来编译动态组件与Angular 2.0?.
当我使用最新的Angular CLI和非生产设置构建它时,一切正常.但是,一旦我使用生产设置,我在尝试加载具有动态创建内容的页面时立即在浏览器中获得以下错误跟踪:
例外:找不到'e'的NgModule元数据.
ORIGINAL STACKTRACE:
main.dc05ae9 ... .bundle.js:格式:4731
错误:找不到'e'的NgModule元数据.
at t(vendor.c18e6df ... .bundle.js:格式化:76051)
at t.resolve(vendor.c18e6df ... .bundle.js:格式化:20624)
at t.getNgModuleMetadata(vendor.c18e6df ... .bundle.js:formatted: 20169)
在t._compileModuleAndAllComponents(vendor.c18e6df ... .bundle.js:格式化:40462)的t._loadModules(vendor.c18e6df ... .bundle.js:格式化:40474
)
at t.compileModuleAndAllComponentsSync(vendor.c18e6df ... .bundle. js:格式化:40436)
在e.createComponentFactory(main.dc05ae9 ... .bundle.js:格式:4789)
这是我的组件工厂类:
@Injectable()
export class DynamicTypeBuilder {
constructor() {
}
private _cacheOfFactories: {[templateKey: string]: ComponentFactory<any>} = {};
private compiler: Compiler = new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();
public createComponentFactory<COMPONENT_TYPE>(type: any, template: string, additionalModules: any[] = []): Observable<ComponentFactory<COMPONENT_TYPE>> {
let …Run Code Online (Sandbox Code Playgroud) 如果没有observable,我可以在HTML模板中编写以下行:
<div *ngIf="(myVarA || myVarB) && myVarC !== x"></div>
Run Code Online (Sandbox Code Playgroud)
如果myVar现在所有变量都是可观察的,那么如何翻译这一行呢?
<div *ngIf="((myVarA | async) || (myVarB | async)) && (myVarC | async) !== x">
Run Code Online (Sandbox Code Playgroud)
不起作用.
在另一个问题(在一个Angular*ngIf语句中放置两个异步订阅)可以实现将两个或多个observable组合成一个ngIf的可能性
<div *ngIf="{ a: myVarA | async, b: myVarB | async } as result"></div>
Run Code Online (Sandbox Code Playgroud)
但是,我没有看到在表达式上使用任何布尔运算符(或任何运算符)的可能性,然后用于计算ngIf.
我该如何解决这个问题?请注意,我的所有Observable都使用下面的BehaviorSubject.我认为我想要的是combineLatest在模板中使用运算符.
额外:如果整个表达式的计算结果为true,以便以后在模板中使用,有没有办法提取myVarA的单个值(如myVarA | async as varA)?
在我的pom.xml中,我配置了一个插件,将某些Protobuf文件转换为Java类文件.它看起来像这样:
<plugin>
<groupId>com.github.igor-petruk.protobuf</groupId>
<artifactId>protobuf-maven-plugin</artifactId>
<version>0.5.3-SNAPSHOT</version>
<executions>
<execution>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
<configuration>
<protocCommand>${basedir}/protoc/bin/protoc</protocCommand>
<inputDirectories>
<inputDirectory>proto</inputDirectory>
</inputDirectories>
</configuration>
</plugin>
Run Code Online (Sandbox Code Playgroud)
在这个Maven中生成.classpath带有以下条目的文件:
<classpathentry kind="src" output="target/classes" path="target/generated-sources/protobuf">
<attributes>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
Run Code Online (Sandbox Code Playgroud)
我现在想要Maven做的是在该类路径条目中添加一个额外的"属性"条目,以便条目如下所示:
<classpathentry kind="src" output="target/classes" path="target/generated-sources/protobuf">
<attributes>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
<attribute name="ignore_optional_problems" value="true"/>
</attributes>
</classpathentry>
Run Code Online (Sandbox Code Playgroud)
就像那样,我不会从代码的那一部分得到警告.
目前我只是不知道该怎么做.我必须编辑哪些文件或其他设置?在Eclipse中我可以这样做吗?
但这或多或少是关于如何修改Maven以包含自定义条目的一般性问题,因为我们还有一些我们想要添加自定义内容的位置.
在Angular 1.x中,以下代码可以正常工作,因为我想在ng-repeat中单击并翻转一张卡片
<div class="card" ng-repeat="let card of cards">
<div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
但是在Angular 2中单击时,它会翻转ngFor循环中的每个"卡片"...如何仅将ngClass条件绑定到元素本身?
<div class="card" *ngFor="let card of cards">
<div class="flipcard" [ngClass]="{'flipped': isflipped }" (click)="isflipped = !isflipped;">
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我正在尝试使用PrimeNG的p-dataScroller构建一个通用列表组件,如下所示:
<div>
<p-dataScroller [value]="items" ...more properties...>
<template let-listItem>
<div (click)="select(listItem)">
<template [ngTemplateOutlet]="itemTemplate"
[ngOutletContext]="{'item': listItem, 'selected': listItem == selectedItem}"></template>
</div>
</template>
</p-dataScroller>
</div>
Run Code Online (Sandbox Code Playgroud)
p-dataScroller本身使用模板传播items数组中的每个项目.
selectedItem并且select()是相应的通用列表组件的方法.在这个组件中,我这样声明itemTemplate:
@ContentChild(TemplateRef)
public itemTemplate: TemplateRef<any>;
Run Code Online (Sandbox Code Playgroud)
最后我以下列方式使用我的通用列表组件:
<generic-list [items]="someArray">
<template>
<list-item [itemType]="itemType">
<template let-item>
<i class ="fa" [ngClass]="{'fa-lock': item.visibility == 0,
'fa-users': item.visibility == 1}"></i>
</template>
</list-item>
</template>
</generic-list>
Run Code Online (Sandbox Code Playgroud)
如您所见,模板组件(list-item)本身有另一个模板!
首先,我想知道这是否存在问题(三个嵌套模板),但更重要的是,ngOutletContext似乎没有将值添加到每个模板中list-item.两者item和selected输入参数都存在于list-item组件中,但似乎没有设置它们.在调试时,Angular 2正确地将list-item组件添加为列表条目,但抛出异常,因为它缺少item输入参数AfterContentInit.有趣的是,itemType输入参数设置正确,可能是因为它不属于ngOutletContext.
我不能移动列表项组件的通用列表组件模板内,降低了复杂性,因为有几种不同类型的可以使用的物品(所有这些都具有 …