在角度5中,有ngIf
指令的内置功能 - as syntax
。你可以在这里找到https://toddmotto.com/angular-ngif-async-pipe的例子。
在下面的例子中,user$
是一个可观察的。
<div *ngIf="(user$ | async) as user; else loading">
<user-profile
[user]="user.profile">
</user-profile>
<user-messages
[user]="user.messages">
</user-messages>
</div>
<ng-template #loading>
Loading stuff...
</ng-template>
我创建了自己的指令,用加载微调器替换元素的内容,我想启用传递observable作为输入,请参阅下面的代码。
@Directive({ selector: '[appLoadingData]' })
export class LoadingDataDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver
) { }
@Input()
set appLoadingData(data: any) {
if (data != null) {
if (data.subscribe) {
this.addLoadingPlaceholder();
data.subscribe(() => {
setTimeout(() => this.addView(), 0);
});
} else {
this.addView();
}
} else {
this.addLoadingPlaceholder();
}
}
private addView() {
this.viewContainerRef.clear();
this.viewContainerRef.createEmbeddedView(this.templateRef);
}
private addLoadingPlaceholder() {
this.viewContainerRef.clear();
const loadingComponentFactory = this.componentFactoryResolver.resolveComponentFactory(LoadingDataComponent);
this.viewContainerRef.createComponent(loadingComponentFactory);
}
}
我希望以下一种方式使用
<ng-container *ngFor="let chartConfig of chartsConfigs">
<div class="chart-wrapper"
*appLoadingData="(chartConfig.chartGroups$ | async) as groups">
<chart-summary [chartData]="groups"
[chartOptionsName]="chartConfig.chartType">
</chart-summary>
</div>
</ng-container>
或者理想的*appLoadingData="chartConfig.chartGroups$ as groups"
没有作为语法(*appLoadingData="chartConfig.chartGroups$ | async"
和[chartData]="chartConfig.chartGroups$ | async"
),在我的加载器被解雇后有一个延迟,我认为它发生是因为在addView()
指令中,异步管道第二次调用。我想为ngIf指令实现as syntax
。我试图像这样使用它:*appLoadingData="(chartConfig.chartGroups$ | async) as groups"
,但不幸的是在这种情况下groups
总是undefined
。
如何在自定义指令中实现as syntax
?
你可以看到他们正在使用_context
变量。 https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts
另见@yurzui的回答。 How to declare a variable in a template in Angular2
我的最终结果:
export class LoadingDataDirective {
context: any = {};
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private componentFactoryResolver: ComponentFactoryResolver
) { }
@Input()
set appLoadingData(data: any) {
if (data != null) {
if (this.isObservable(data)) {
this.addLoadingPlaceholder();
const subscription = data.subscribe((observableResult: any) => {
this.addView(observableResult);
subscription.unsubscribe();
});
} else {
this.addView(data);
}
} else {
this.addLoadingPlaceholder();
}
}
private addView(contextData: any) {
this.context.$implicit = this.context.appLoadingData = contextData;
this.viewContainerRef.clear();
this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
}
private addLoadingPlaceholder() {
this.viewContainerRef.clear();
const loadingComponentFactory = this.componentFactoryResolver.resolveComponentFactory(LoadingDataComponent);
this.viewContainerRef.createComponent(loadingComponentFactory);
}
private isObservable(data: any): boolean {
return !!data.subscribe;
}
}
chartConfig.charGroup$
- 是可观察的
<ng-container *ngFor="let chartConfig of chartsConfigs">
<div class="chart-wrapper"
*appLoadingData="chartConfig.chartGroups$ as groups">
<chart-summary [chartData]="groups"
[chartOptionsName]="chartConfig.chartType">
</chart-summary>
</div>
</ng-container>