Angular 角度2-禁用更改检测

你好，我有一个聊天信息组件。我在变化检测方面有问题。当我输入时，ngFor指令仍然会重新绘制所有消息。我想在显示此组件时绘制消息，然后在添加新消息后绘制消息。这是我的密码：

chat.component.ts:

@Component({
    selector: 'my-chat',
    templateUrl: './chat.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChatComponent implements OnInit {
    text: string;
    @Input() messages: ChatMessage[];
    @Output() onChanged: EventEmitter<string> = new EventEmitter<string>();
    constructor(private app: App, private cd: ChangeDetectorRef) {}

    ngOnInit() {
        this.messages = !this.messages ? [] : this.messages;        
    }

    onChangeHandler(value: string) {
        this.onChanged.emit(value);
    }

    trackByFn(index, item){
        console.log(index, item); //still calls when typing
        return item.Id;
    }
}

export interface ChatMessage {
    Text: string;
}

<form action="#" method="post" *ngIf="!readonly" [style.margin-bottom]="'10px'">
    <div class="img-push" [ngClass]="{'input-group': enableSaveButton}">
        <textarea class="form-control input-sm" rows="2" style="resize:none" [(ngModel)]="text" [ngModelOptions]="{standalone: true}"
         (ngModelChange)="onChangeHandler($event)"></textarea>
    </div>
</form>
<div class="box-body box-comments pre-scrollable">
    <ng-container *ngIf="messages.length != 0">
        <div class="box-comment" *ngFor="let message of messages; let i=index;trackBy:trackByFn">
            <div class="comment-text">
                <pre>{{message.Text}}</pre>
            </div>
        </div>
    </ng-container>
</div>

@组件({
选择器：“我的聊天室”，
templateUrl:'./chat.component.html'，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类组件实现OnInit{
文本：字符串；
@Input（）消息：ChatMessage[]；
@Output（）onChanged:EventEmitter=新的EventEmitter（）；
构造函数（私有app:app，私有cd:ChangeDetectorRef）{}
恩戈尼尼特（）{
this.messages=！this.messages？[]：this.messages；
}
onChangeHandler（值：字符串）{
this.onChanged.emit（值）；
}
trackByFn（索引，项目）{
console.log（index，item）；//键入时仍会调用
返回项目.Id；
}
}
导出接口消息{
文本：字符串；
}

chat.component.html:

@Component({
    selector: 'my-chat',
    templateUrl: './chat.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChatComponent implements OnInit {
    text: string;
    @Input() messages: ChatMessage[];
    @Output() onChanged: EventEmitter<string> = new EventEmitter<string>();
    constructor(private app: App, private cd: ChangeDetectorRef) {}

    ngOnInit() {
        this.messages = !this.messages ? [] : this.messages;        
    }

    onChangeHandler(value: string) {
        this.onChanged.emit(value);
    }

    trackByFn(index, item){
        console.log(index, item); //still calls when typing
        return item.Id;
    }
}

export interface ChatMessage {
    Text: string;
}

<form action="#" method="post" *ngIf="!readonly" [style.margin-bottom]="'10px'">
    <div class="img-push" [ngClass]="{'input-group': enableSaveButton}">
        <textarea class="form-control input-sm" rows="2" style="resize:none" [(ngModel)]="text" [ngModelOptions]="{standalone: true}"
         (ngModelChange)="onChangeHandler($event)"></textarea>
    </div>
</form>
<div class="box-body box-comments pre-scrollable">
    <ng-container *ngIf="messages.length != 0">
        <div class="box-comment" *ngFor="let message of messages; let i=index;trackBy:trackByFn">
            <div class="comment-text">
                <pre>{{message.Text}}</pre>
            </div>
        </div>
    </ng-container>
</div>

{{message.Text}

我完全尝试了您的代码片段，发现

*ngFor

规则下的元素没有被重新引用。更改文本时仍在调用

trackByFn

函数，但仅作为

ngDoCheck

调用

NgForOf

指令的一部分，该指令在使用

*ngFor

时自动创建

---

您可以在DOM检查器的devtools中的Chrome中验证这一点。如果元素正在重新招标，您将看到与此处大致相同的内容（取自）

您使用哪个角度版本？我知道你在标题中写了2，但人们有时仍然将Angular的较新版本称为Angular 2。决定是否显示此组件的条件是什么？@DanMacák我在版本4.0中有Angular。0@Abhi

检查

数据。消息

变量

*ngIf=“data.Messages”

可能使您的组件可见，即使它是

[]

。您可能希望制定一个不同的条件以使组件可见。如果要在用户实际输入新消息之前不显示此组件，则必须比较

消息

数组的长度。基本上，您必须使组件在准确的事件中可见。