如何以编程方式滚动 Mat 对话框内容？

Question

我有一个MatDialog（带MatDialogContent），它比屏幕大，所以出现竖条。在提交失败和所有表单字段重新生效后，我想有条件地滚动到该对话框的底部，向用户显示 MatError 。如何实现？

Answer 1

我在 div 上以编程方式实现了滚动，但在 MatDialog 内容上不确定，但你可以试一试。

<div #scrollMe style="overflow: scroll; height: xyz;">
    // ...Scroling content
</div>

然后在component.ts

import {..., ElementRef, ViewChild, OnInit} from 'angular2/core'
@Component({
    ...
})
export class ChannelComponent implements OnInit{

    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    scrollToBottom(): void {
        try {
            this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
        } catch(err) {

        }                 
    }

    onError() {
        // Call scroll to bottom when you want to show error at bottom.
        this.scrollToBottom();
    }
}

如何以编程方式滚动 Mat 对话框内容？

How to programatically scroll the MatDialogContent?

angular-material

angular

angular-material-7