После завершения обновления с Angular 5 до 8 почти все работает, кроме модальных диалоговых окон Material. Используя отладчик браузера, мы видим, что структура находится в DOM, но они не прорисовываются. Мы изначально использовали модуль аниматора No-op. Когда я переключил его на модуль BrowserAnimations, появилось диалоговое окно для анимации, но после завершения анимации оно исчезло визуально. Он все еще там, и вы можете частично взаимодействовать с ним - если вы нажмете, где должна быть отображена кнопка «Закрыть», диалог закроется. (Вы можете сказать это, потому что «стеклянная» / серая крышка экрана исчезает.) Мы исправили все модульные тесты (2500+), и они работают на 100% чистыми, и большая часть приложения работает, как и ожидалось. Просто диалоговые окна исчезают визуально.
Вещи, которые я уже пробовал:
- установка z-индекса различных элементов на смешные значения (25000) с помощью инструментов отладки Chrome
- установка свойств отображения CSS явно для «блокировки» на различных элементах с помощью отладчика
- установка явной видимости CSS для «visible»
- установка непрозрачности CSS для явного «1»
- проверил, что все компоненты диалога перечислены в компонентах EntryComponents модуля, в котором они находятся (и что этот модуль импортирован в модуль основного приложения)
Все работало нормальноAngular 5 - это определенно побочный эффект апгрейда. Я подозреваю, что это может быть взаимодействие Материала с каким-то другим модулем, который мы используем, который раньше хорошо играл вместе, но больше не делает. Тем не менее, я не уверен, что это может быть или как это понять. Для этого вот что мы используем (package.json extact):
"dependencies": {
"@angular/animations": "^8.2.1",
"@angular/cdk": "^8.1.2",
"@angular/common": "^8.2.1",
"@angular/compiler": "^8.2.1",
"@angular/core": "^8.2.1",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^8.2.1",
"@angular/material": "^8.1.2",
"@angular/material-moment-adapter": "^8.1.2",
"@angular/platform-browser": "^8.2.1",
"@angular/platform-browser-dynamic": "^8.2.1",
"@angular/router": "^8.2.1",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"bootstrap": "^4.3.1",
"classlist.js": "^1.1.20150312",
"core-js": "^3.2.1",
"hammerjs": "^2.0.8",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"ngx-bootstrap": "^5.1.1",
"pdfjs-dist": "^2.1.266",
"rxjs": "^6.5.2",
"ts-helpers": "^1.1.2",
"tslib": "^1.10.0",
"velocity-animate": "^1.5.2",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1"
},
В моем app.module.ts у меня есть следующее:
@NgModule({
imports: [
<<<snip>>> ModalTemplatesModule,
BrowserAnimationsModule, <<<snip>>> ],
И затемModalTemplatesModule определяется как:
const modalTemplates: any[] = [
ModalTimeoutComponent,
ConfirmActionModalComponent,
// etc...
];
@NgModule({
imports: [
SharedModule,
ReactiveFormsModule,
FormsModule,
CommonComponentsModule,
CommonNonComponentsModule
],
declarations: modalTemplates,
exports: modalTemplates,
providers: [
ConfigService,
TransactionService
],
entryComponents: modalTemplates
})
export class ModalTemplatesModule {}
Мы создали обертку для всех наших модалов, в которую мы затем добавили содержимое конкретного диалога. Так что если что-то не так с кодом, скорее всего, в этом классе. Но это довольно просто ... Шаблон ModalWrapper:
<div fxLayoutAlign="center center" fxLayout="column" fxFlexFill>
<div class="modal-wrapper full-width" fxLayout="column" fxLayoutAlign="center center">
<div *ngIf="showCloseButton" class="full-width" fxLayoutAlign="end end" fxLayout="column" fxFlex="none">
<button id="closeButton" class="close-button-outside" (click)="close()" #closeButton>
<span fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="0.5rem">
<i class="icon-close-hover"></i>
<span>{{"common.buttons.close" | translate}}</span>
</span>
</button>
</div>
<ng-content></ng-content>
</div>
</div>
Фактический тег находится в шаблонах компонента, который помещается в оболочку с помощью.
ModalWrapperComponent
@Component({
selector : 'modal-wrapper',
templateUrl: './modal-wrapper.component.html',
styleUrls: ['./modal-wrapper.component.scss']
})
export class ModalWrapperComponent {
@Output() onClose: EventEmitter<void> = new EventEmitter<void>();
@Input() showCloseButton: boolean = true;
constructor() {}
close(): void {
this.onClose.emit();
}
}
На данный момент у меня заканчиваются идеи, почему он исчезает и как это исправить. Надеясь, что кто-то еще столкнулся с этим и распознает проблему и знает, как ее исправить!
Обновление: Если я использую подключаемый модуль доступности WAVE для Chrome и "отключаю все CSS",диалоговые элементы появляются внизу экрана. Так что можно предположить, что это вопрос стиля. Есть ли другой способ «спрятать» что-то ??