Question

除了用角形材料中的Ng BLOCK UI之外，还有其他实现blockUI的替代方法。

Answer 1

如果没有其他选择，手动构建它并不难。您将制作一个接受属性绑定的组件，以了解何时发生阻塞/加载状态，并在此基础上显示/隐藏该组件的模板。

模板本身将是一个覆盖层，绝对定位为完整的高度和宽度，可以覆盖父级中的所有内容（使用CSS位置和z-index），有效阻止该区域内的任何用户交互，直到父级组件将属性绑定更新为删除它。

快速（未经测试）示例：

uiBlock.component.ts

@Component({
  selector: 'app-ui-block',
  template: `
    <div class="ui-block" [class.active]="blocking">
      <div class="loading-icon">...</div>
    </div>
  `,
  styles: [`
    /* Makes sure this component positions relative to it's parent */
    :host {
      position: relative;
      z-index: 1;
    }

    .ui-block {
      display: none;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .ui-block.active {
      display: block;
    }

    .loading-icon {...}
  `]
})
export class UiBlockComponent implements OnInit {
  @Input() blocking = false;
}

parent.component.ts

@Component({
  selector: 'app-parent-comp',
  template: `
    <div>
      <app-ui-block [blocking]="loading"></app-uiBlock>
      <!-- Parent component content, will be blocked -->
    </div>
  `
})
export class ParentComponent implements OnInit {
  loading = false;

  constructor() {}

  ngOnInit() {
    doSomethingAsync() {}
  }

  doSomethingAsync() {
    this.loading = true;

    // Async operation here

    this.loading = false;
  }
}

您需要使用该示例来填补空白，以使其正常运行，但这将是ui阻止或加载状态组件的基本思想

角度材料的块UI

1 个答案: