Использование компонентов пользовательского интерфейса ng-zorro-antd с ABP Framework

Можем ли мы рассматривать ng-zorro-antd как замену компонентам пользовательского интерфейса для abp angular?

Ссылки

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement

https://ng.ant.design/docs/introduce/en


person Kishore Sahasranaman    schedule 17.10.2020    source источник


Ответы (1)


  1. Добавить ng-zorro-antd

    yarn add ng-zorro-antd

  2. Добавьте необходимые модули в shared.module.ts

import { CoreModule } from '@abp/ng.core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgModule } from '@angular/core';
import { ThemeBasicModule } from '@abp/ng.theme.basic';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { NgxValidateCoreModule } from '@ngx-validate/core';
import { NzLayoutModule } from 'ng-zorro-antd/layout'; //add this line

@NgModule({
  declarations: [],
  imports: [
    CoreModule,
    ThemeSharedModule,
    ThemeBasicModule,
    NgbDropdownModule,
    NgxValidateCoreModule,
    NzLayoutModule //add this line
  ],
  exports: [
    CoreModule,
    ThemeSharedModule,
    ThemeBasicModule,
    NgbDropdownModule,
    NgxValidateCoreModule,
    NzLayoutModule //add this line
  ],
  providers: []
})
export class SharedModule {}

  1. Следуйте инструкциям от

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-a-layout

  1. Перейдите в \ src \ app \ my-layout \ my-layout.component.html и добавьте приведенный ниже код.

  <nz-layout>
    <nz-header>Header</nz-header>
    <nz-content>
        <router-outlet></router-outlet>
    </nz-content>
    <nz-footer>Footer</nz-footer>
</nz-layout>

person Kishore Sahasranaman    schedule 17.10.2020
comment
у вас есть идеи, как использовать директиву abpPermission в настраиваемом макете. Я хотел бы скрыть / показать элементы меню бокового нефа с разрешенным разрешением. - person Ryan Layton; 26.12.2020
comment
Попробуйте импортировать SharedModule. - person Kishore Sahasranaman; 26.12.2020