Как установить кликабельность другого элемента, когда открыт диалог углового материала - PullRequest
Новая
       33

Как установить кликабельность другого элемента, когда открыт диалог углового материала

0 голосов
/ 27 марта 2019

У меня вопрос, как я могу сделать так, чтобы другой элемент в веб-приложении был кликабельным, когда материал Diaolog открыт.

онлайн Я нашел пример, но он использовался с MdDialog, и я привязал к изменению MdDialog на MatDialog, но он не работал,

коды следующие: 


<a href="#open1" data-open-modal="open1"><button md-raised-button data-open-modal="open1" color="primary" (click)="open($event)">Open first dialog</button></a>
<a href="#open2" data-open-modal="open2"><button md-raised-button data-open-modal="open2" color="primary" (click)="open($event)">Open second dialog</button></a>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

   constructor( public dialog: MdDialog) { }

  open(e){
    //debugger;
    if(window.location.href.split('#')[1] == e.target.parentElement.dataset.openModal){
       return false;
    }
    let dialogRef: MdDialogRef<CommentDialogComponent> = this.dialog.open(CommentDialogComponent);
        dialogRef.componentInstance.invoiceItemComments = [
        {comments: 23, createdBy: "NO2", createdDate: 1.4},{comments: 23, createdBy: "NO2", cvreatedDate: 1.4},{comments: 23, createdBy: "NO2", createdDate: 1.4}
      ];
        dialogRef.afterClosed().subscribe(result => {
        dialogRef = null;
        });
  }

}

@Component({
    selector: 'comment-dialog',
    templateUrl: './comment-dialog.html'
})
export class CommentDialogComponent {
  invoiceItemComments:any;
    constructor(public dialogRef: MdDialogRef<CommentDialogComponent>) {

    }
}


<h2 md-dialog-title>InvoiceItem Comments</h2>
<md-dialog-content>
    <table class="table">
        <thead class="thead-inverse">
            <tr>
                <th>No</th>
                <th>Comments</th>
                <th>Created By</th>
                <th>Created Date</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of invoiceItemComments; let i = index">
                <th scope="row">{{i}}</th>
                <td>{{item.comments}}</td>
                <td>{{item.createdBy}}</td>
                <td>{{item.createdDate}}</td>
            </tr>   
        </tbody>
    </table>
</md-dialog-content>
<md-dialog-actions>
   <a href="#closed"> <button type="button" md-raised-button (click)="dialogRef.close(true)">OK</button></a>
</md-dialog-actions>

В этом примере я всегда могу нажать кнопку, когда открыто диалоговое окно.но я не могу понять, как это работает, как я могу изменить mdDilaog на matDialog?

какие решения?

1 Ответ

0 голосов
/ 27 марта 2019

Попробуйте использовать события указателя: нет

style.css 

.cdk-overlay-backdrop{
  pointer-events: none ;
}

Пример: https://stackblitz.com/edit/angular-76mnzu

...