0

我已经编写了代码来显示角度模态对话框，但是我不知道如何将其居中对齐并在屏幕很大时使其适合父组件我希望它居中。

但是发生的情况是模态对话框背景左右溢出。enter code here

发布列表组件

export class PostListComponent{


  ngOnInit(): void {}

 /** create modal post */
  createPost(): void {
    const dialogPosition: DialogPosition = { top: '50px' };

    this.matDialog.open(CreatePostComponent, {
      position: dialogPosition,
      maxWidth: '100vw',
      width: '100%',
      panelClass: 'post-dialog-container',
    });
  }
}

创建帖子组件

export class CreatePostComponent implements OnInit {
  user: string;
  postForm: FormGroup;
  cropping: boolean;
  fileToUpload: File | null = null;
  postData: any;
  croppedImage: any[];
  currentUser: any;
  currentUser$: Observable<User>;
  submitButton = false;

  constructor(private store: Store<State>, private formBuilder: FormBuilder, private 
    _ngZone: NgZone, private router: Router,
    public dialogRef: MatDialogRef<CreatePostComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Post) { }

   @ViewChild('autosize') autosize: CdkTextareaAutosize;


  ngOnInit() {
    this.imageList = [];
    this.user = '/assets/user.png';
    this.currentUser$ = this.store.select(getCurrentUser);
    this.postForm = this.formBuilder.group({
      text: ['', []],
      image: ['', []],
    });
  }

  triggerResize() {
    this._ngZone.onStable.pipe(take(1))
      .subscribe(() => this.autosize.resizeToFitContent(true));
  }
}

创建帖子组件 HTML

<div class="post-container">
  <div class="row justify-content-center">
    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-2 col-xl-3">
      <div class="" style="background-color: white;"></div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8 col-xl-5">

      <div class="create-post">
        <mat-dialog-content>
          <div class="container-fluid-post">
            <div class="d-flex bd-highlight">
              <div class="p-2 flex-grow-1 bd-highlight">
                <div class="d-flex px-3 pointer">
                  <mat-icon (click)="closeDialog()" class="font-weight-bold">clear</mat- 
                    icon>
                </div>
              </div>
              <div class="p-2 bd-highlight">
                <button type="submit" class="btn btn-primary btn-sm font-weight-bold"
                  [disabled]="submitButton === false">Post</button>
              </div>
            </div>
            <mat-divider></mat-divider>
            <div class="d-flex">
              <div class="px-0">
                <div class="img-container">
                  <img src="{{ (currentUser$ | async).profilePicture | imageUrlPipe}}"
                    onerror="this.src='assets/no-avatar.png'" alt="user" height="40px" 
                    width="40px"
                    class="rounded-circle">
                </div>
              </div>
              <form [formGroup]="postForm" class="form-container" 
               (ngSubmit)="createPost()">
                <div class="post-container px-0">
                  <mat-form-field appearance="none" class="form-field">
                    <textarea matInput name="text" formControlName="text" id="text" 
                     class="post-input"
                      cdkTextareaAutosize #autosize="cdkTextareaAutosize" 
                      cdkAutosizeMinRows="1"
                      cdkAutosizeMaxRows="1000" placeholder="What would you like to say 
                today?">
            </textarea>
                  </mat-form-field>
                  <div class="d-flex bd-highlight">
                    <div class="p-2 flex-grow-1 bd-highlight">
                      <div class="d-flex">
                        <div class="pointer text-danger">
                          <input type="file" accept="image/*" #file hidden 
                              (change)="addImage($event)" />
                          <mat-icon id="file-input" (click)="file.click()" class="icon-container">add_a_photo</mat-icon>
                        </div>
                      </div>
                    </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </mat-dialog-content>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-2 col-xl-3">
      <div class=""></div>
    </div>
  </div>
</div>

我想删除模态对话框中的背景颜色，例如它应该只适合页面的中心，这意味着它应该适合父宽度。

我现在有这样的东西

更新 我希望模式doialog只显示表单字段应该省略额外的空白我在这里添加了stackblitz stackblitz链接

4

1 回答 1

0

解决后我决定设置 mat-dialog 透明，将 box shadow 设置为 none 并将滚动策略更改为 scrollStrategy：new NoopScrollStrategy()

根据上述问题，更新的代码如下：

帖子列表组件

............ previous code
    this.matDialog.open(CreatePostComponent, {
      position: dialogPosition,
      maxWidth: '100vw',
      width: '100%',
      panelClass: 'post-dialog-container',
      scrollStrategy: new NoopScrollStrategy()
    });
  }

然后使用以下代码添加全局样式

  .post-dialog-container .mat-dialog-container {
    background-color: var(--background);
    box-shadow: none;
  padding: 0px !important;
  overflow: hidden !important;
}

然后在那之后一切都修复了

于 2021-10-17T00:04:17.797 回答