2

我一直在研究一个简单的聊天显示自动滚动指令：

@Directive({
    selector: "[autoScroll]"
})
export class AutoScroll {
    @Input() inScrollHeight;
    @Input() inClientHeight;

    @HostBinding("scrollTop") outScrollTop;

    ngOnChanges(changes: {[propName: string]: SimpleChange}) {
        if (changes["inScrollHeight"] || changes["inClientHeight"]) {
            this.scroll();
        }
    };

    scroll() {
        this.outScrollTop = this.inScrollHeight - this.inClientHeight;
    };
}

当我设置enableProdMode()并且ChangeDetectionStrategy设置为默认值时，该指令将起作用，但是在“开发模式”下我得到一个异常。我可以将 设置ChangeDetectionStrategy为onPush，在这种情况下不会发生异常，但滚动会滞后。

有没有办法更好地构造这段代码，以便更新 Dom 然后调用 Scroll 函数？我已经尝试过setTimeout()，但这会使延迟变得更糟，尝试使用ChangeDetectorRef并订阅可观察到的 trigger markForCheck()。使用ngAfterViewChecked()会导致浏览器崩溃。

@Component({
    selector: "chat-display",
    template: `
            <div class="chat-box" #this [inScrollHeight]="this.scrollHeight" [inClientHeight]="this.clientHeight" autoScroll>
                <p *ngFor="#msg of messages | async | messageFilter:username:inSelectedTarget:inTargetFilter:inDirectionFilter" [ngClass]="msg.type">{{msg.message}}</p>
            </div>
       `,
    styles: [`.whisper {
            color: rosybrown;
        }`],
    directives: [NgClass, AutoScroll],
    pipes: [AsyncPipe, MessageFilterPipe],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChatDisplay implements OnInit {

    username: string;
    @Input() inSelectedTarget: string;
    @Input() inTargetFilter: boolean;
    @Input() inDirectionFilter: boolean;

    messages: Observable<ChatType[]>;

    constructor(private socketService_: SocketService, private authService_: AuthService) {
        this.username = this.authService_.username;
    };

    ngOnInit() {
    }

}

这是在开发模式下触发的异常：

例外：表达式 'this.scrollHeight in ChatDisplay@1:40' 在检查后已更改。以前的值：“417”。当前值：'420' in [this.scrollHeight in ChatDisplay@1:40] angular2.dev.js (23083,9)

4

2 回答 2

3

有没有办法更好地构造这段代码，以便更新 DOM，然后调用 Scroll 函数？

DOM 应该在ngAfterViewChecked()调用之前更新。看看这样的事情是否有效：

ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    // detect the change here
    if (changes["inScrollHeight"] || changes["inClientHeight"]) {
        this.scrollAfterDomUpdates = true;
    }
};
ngAfterViewChecked() {
    // but scroll here, after the DOM was updated
    if(this.scrollAfterDomUpdates) {
       this.scrollAfterDomUpdates = false;
       this.scroll();
    }
}

如果这不起作用，请尝试将滚动调用包装在 setTimeout 中：

    if(this.scrollAfterDomUpdates) {
       this.scrollAfterDomUpdates = false;
       this.setTimeout( _ => this.scroll());
    }
于 2016-03-25T21:33:28.837 回答
2

我找到了解决这个问题的一种方法，它涉及将聊天显示分成两个独立的组件并使用内容投影。因此存在从父级到子级的更改流程，并且在同一个组件中没有两个功能，其中一个触发另一个更改。我可以使用默认的 changeDetectionStrategy 而不会在开发模式下出现异常。

@Component({
    selector: "chat-display",
    template: `
    <auto-scroll-display>
        <chat-message *ngFor="#chat of chats | async | messageFilter:username:inSelectedTarget:inTargetFilter:inDirectionFilter" [message]="chat.message" [type]="chat.type"></chat-message>
    </auto-scroll-display>
    `,
    directives: [NgClass, AutoScrollComponent, ChatMessageComponent],
    pipes: [AsyncPipe, MessageFilterPipe]
})
export class ChatDisplay implements OnInit { /* unchanged code */ }

自动滚动指令与原始帖子相同，试图找出是否有办法将指令功能组合到组件中。它现在只是充当容器。

@Component({
    selector: "auto-scroll-display",
    template: `
    <div #this class="chat-box" [inScrollHeight]="this.scrollHeight" [inClientHeight]="this.clientHeight" autoScroll>
        <ng-content></ng-content>
    </div>
    `,
    directives: [AutoscrollDirective]
})
export class AutoScrollComponent{ }

这是一个带有工作代码的 github 链接link。

于 2016-03-25T17:29:08.827 回答