自定义 material 微调器不可见
customized material spinner not visble
我有 angular 11 个申请。当从后端加载数据时,我有一个微调器必须可见。所以当用户按下 fa-icon 时。在数据从服务器返回的那一刻,fa-icon 是不可见的。但问题是微调器不可见。
这是微调器的自定义组件:
export class MatSpinnerOverlayComponent implements OnInit {
constructor() { }
@Input() value : number = 100;
@Input() diameter: number = 100;
@Input() mode : string ="indeterminate";
@Input() strokeWidth : number = 10;
@Input() overlay: boolean = false;
@Input() color: string = "primary";
ngOnInit(): void {}
}
模板:
<ng-container *ngIf="overlay; else progressSpinner">
<div class="overlay">
<div class="center">
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
</div>
</ng-container>
<ng-template #progressSpinner>
<ng-template #progressSpinner>
<mat-progress-spinner
[diameter]="diameter"
[mode]="mode"
[color]="color"
[strokeWidth]="strokeWidth"
[value]="value"
>
</mat-progress-spinner>
</ng-template>
</ng-template>
和css:
.center {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
:host ::ng-deep .track circle{
stroke-opacity: 0.3 !important;
}
.overlay {
height: 100vh;
width: 100%;
background-color: rgba(94, 11, 11, 0.286);
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
以及我注入微调器的组件:
<button *ngIf= "!isLoading"
(click)="createChartFromMap(selectedSensor.sensor.charts[0],selectedSensor.properties['key'],selectedSensor.properties['name'] )"
class="ml-auto unstyled-button" [disabled]="(mapRegistryService.$blockButtonGraph | async)" >
<fa-icon [icon]="selectedSensor.sensor.icon" [styles]="{'color': '#BF0404'}" size="lg" class="menu-list-item">
</fa-icon>
</button>
<app-mat-spinner-overlay *ngIf="isLoading" style="margin:0 auto;" mode="determinate" strokeWidth="20" value="100" diameter="70" class="mat-spinner-color"></app-mat-spinner-overlay>
而且我已经添加了
MatProgressSpinnerModule
在 app.module.
所以我的问题是如何显示微调器?
谢谢
例如在 mat-spinner-overlay 中。当我在此行上放置断点时:
ngOnInit(): void {}
它到达那条线。
但是微调器不可见
我在这里声明了自定义微调器:
@NgModule({
declarations: [CustomElementDirective,
WidgetEditorDirective,
MatSpinnerOverlayComponent],
imports: [
CommonModule,
FontAwesomeModule,
RouterModule,
MatProgressSpinnerModule,
],
exports: [CustomElementDirective, WidgetEditorDirective, FontAwesomeModule, MatSpinnerOverlayComponent]
})
export class SharedModule { }
并且 sharedModule 在 app.module
中声明
这是选择器:
selector: 'app-mat-spinner-overlay'
哦,如果我这样做:
HELLO1
<ng-container *ngIf="overlay; else progressSpinner">
<div class="overlay">
<div class="center">
HELLO2
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
</div>
</ng-container>
<ng-template #progressSpinner>
<ng-template #progressSpinner>
<mat-progress-spinner
[diameter]="diameter"
[mode]="mode"
[color]="color"
[strokeWidth]="strokeWidth"
[value]="value"
>
</mat-progress-spinner>
HELLO3
</ng-template>
</ng-template>
我只看到 HELLO1 而不是其他的 hello
请确认一下,您是否在模板中为自定义微调器使用了正确的选择器?我在你的代码中看不到它。
此外,当您检查您的浏览器控制台时,您是否看到任何错误?这可能有助于故障排除。
让我们知道什么对您有用。
哦哦,
刚刚删除了内联样式:
<app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>
我有 angular 11 个申请。当从后端加载数据时,我有一个微调器必须可见。所以当用户按下 fa-icon 时。在数据从服务器返回的那一刻,fa-icon 是不可见的。但问题是微调器不可见。
这是微调器的自定义组件:
export class MatSpinnerOverlayComponent implements OnInit {
constructor() { }
@Input() value : number = 100;
@Input() diameter: number = 100;
@Input() mode : string ="indeterminate";
@Input() strokeWidth : number = 10;
@Input() overlay: boolean = false;
@Input() color: string = "primary";
ngOnInit(): void {}
}
模板:
<ng-container *ngIf="overlay; else progressSpinner">
<div class="overlay">
<div class="center">
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
</div>
</ng-container>
<ng-template #progressSpinner>
<ng-template #progressSpinner>
<mat-progress-spinner
[diameter]="diameter"
[mode]="mode"
[color]="color"
[strokeWidth]="strokeWidth"
[value]="value"
>
</mat-progress-spinner>
</ng-template>
</ng-template>
和css:
.center {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
:host ::ng-deep .track circle{
stroke-opacity: 0.3 !important;
}
.overlay {
height: 100vh;
width: 100%;
background-color: rgba(94, 11, 11, 0.286);
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
以及我注入微调器的组件:
<button *ngIf= "!isLoading"
(click)="createChartFromMap(selectedSensor.sensor.charts[0],selectedSensor.properties['key'],selectedSensor.properties['name'] )"
class="ml-auto unstyled-button" [disabled]="(mapRegistryService.$blockButtonGraph | async)" >
<fa-icon [icon]="selectedSensor.sensor.icon" [styles]="{'color': '#BF0404'}" size="lg" class="menu-list-item">
</fa-icon>
</button>
<app-mat-spinner-overlay *ngIf="isLoading" style="margin:0 auto;" mode="determinate" strokeWidth="20" value="100" diameter="70" class="mat-spinner-color"></app-mat-spinner-overlay>
而且我已经添加了
MatProgressSpinnerModule
在 app.module.
所以我的问题是如何显示微调器?
谢谢
例如在 mat-spinner-overlay 中。当我在此行上放置断点时:
ngOnInit(): void {}
它到达那条线。
但是微调器不可见
我在这里声明了自定义微调器:
@NgModule({
declarations: [CustomElementDirective,
WidgetEditorDirective,
MatSpinnerOverlayComponent],
imports: [
CommonModule,
FontAwesomeModule,
RouterModule,
MatProgressSpinnerModule,
],
exports: [CustomElementDirective, WidgetEditorDirective, FontAwesomeModule, MatSpinnerOverlayComponent]
})
export class SharedModule { }
并且 sharedModule 在 app.module
中声明这是选择器:
selector: 'app-mat-spinner-overlay'
哦,如果我这样做:
HELLO1
<ng-container *ngIf="overlay; else progressSpinner">
<div class="overlay">
<div class="center">
HELLO2
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
</div>
</ng-container>
<ng-template #progressSpinner>
<ng-template #progressSpinner>
<mat-progress-spinner
[diameter]="diameter"
[mode]="mode"
[color]="color"
[strokeWidth]="strokeWidth"
[value]="value"
>
</mat-progress-spinner>
HELLO3
</ng-template>
</ng-template>
我只看到 HELLO1 而不是其他的 hello
请确认一下,您是否在模板中为自定义微调器使用了正确的选择器?我在你的代码中看不到它。
此外,当您检查您的浏览器控制台时,您是否看到任何错误?这可能有助于故障排除。
让我们知道什么对您有用。
哦哦,
刚刚删除了内联样式:
<app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>