Блог

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

в Интернете я нашел пример, но он использовался с 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?

какие-либо решения?

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

style.css

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

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