调用reattach（）更改检测后，布尔值无法正常工作；几率

Question

我试图在调用“ this.cdr.reattach（）; ”之后更新布尔值插值 如您在我的示例代码（Stackblitz）中所看到的那样，布尔值Do在内部正确更新，而不管分离/重新连接的状态如何，并将其正确打印在“控制台”选项卡上。

但是，当单击按钮（<button (click)="toggleDetach()">）时，调用reattach（）的插值绑定永远不能仅对布尔值正确工作！ {{是否已分隔？ '已分离'：'已附加'}}

根据isDetached值（false / true），在reattach（）之后，应该在屏幕上立即更改了按钮上的布尔值插值；

我不应该在isDetached上放置“ @Input”，但我想确保进行更改检测。

我什至叫“ this.cdr.detectChanges（）;”但是不起作用！我希望这不是错误！

无论如何，我不知道为什么脱离变更检测机制后，模板上的布尔值插值不能正常工作！

我在Stackblitz上做了一个示例项目。

请有人告诉我如何解决此问题。

这是示例代码。

https://stackblitz.com/edit/angular-mh3mqu?file=src%2Fapp%2Fmyzone.component.ts

import { Component, OnInit, Input, ChangeDetectorRef, SimpleChanges } from '@angular/core';

@Component({
    selector: 'my-zone2',
    template: `
    <button (click)="onClick()">Increase</button>
    <button (click)="changeToggle()">ChangeToggle</button>
    <my-comp [value]="myValue" [isDetached]="mytoggle" [canDetach]="mydetach"></my-comp>
  `,
    styles: []
})
export class Zone2Component implements OnInit {
    myValue = 0;
    mytoggle = false;
    mydetach = false;

    constructor() {}

    ngOnInit() {}

    onClick() {
        this.myValue++;
    }

    changeToggle() {
        if (this.mytoggle) {
            console.log('After changeToggle: ', this.mytoggle);
            this.mytoggle = false;
            this.mydetach = false;
            console.log('After changeToggle: ', this.mytoggle);
        } else {
            console.log('Before changeToggle: ', this.mytoggle);
            this.mytoggle = true;
            this.mydetach = true;
            console.log('After changeToggle: ', this.mytoggle);
        }
    }
}

@Component({
    selector: 'my-comp',
    styles: [ '' ],
    template: `
    <div>
      <button (click)="DoNothing()">{{doNothing}}</button>
      <button (click)="toggleDetach()">
      {{isDetached ? 'Detached' : ' Attached'}}
      {{canDetach ? 'canAttach' : ' canDatach'}}
      / {{changedValue}}
      </button>
      <button (click)="justToggle()">
      justToggle:
      {{justToggleValue}} //
      {{isDetached ? 'Detached' : ' Attached'}}
      </button>
      <div>{{value}}</div>
      <div>isDetached? {{isDetached}}</div>
      <input #box (keyup.enter)="onEnter(box.value)">
      <p>{{inputValue}}</p>
    </div>
  `
})
export class My2Component {
    @Input() value: number;
    @Input() isDetached = false;
    doNothing: string = 'noNothing';
    @Input() canDetach = false;
    //canDetach = false;
  changedValue: number = 0;
  justToggleValue: boolean = false;

    constructor(private cdr: ChangeDetectorRef) {}

    DoNothing() {
        console.log('DoNothing!');
        if (this.isDetached) {
            this.doNothing = 'doNothing';
        } else {
            this.doNothing = 'canDoSomething';
        }
    }
    inputValue = '';
    onEnter(typedValue: string) {
        console.log('onEnter-inputValue: ', typedValue);
        this.inputValue = typedValue;
    }

    justToggle() {
        if (this.isDetached) {
      this.justToggleValue = false;
            this.isDetached = false;
        } else {
      this.justToggleValue = true;
            this.isDetached = true;
        }
    }

    toggleDetach() {
        console.log('toggleDetach() !!!');

        if (this.isDetached) {
            console.log(' before ---> ', this.canDetach);
            console.log(' before ---> ', this.isDetached);
            this.isDetached = false;
      this.canDetach = false;
      this.justToggleValue = false;
            ++this.changedValue;
            this.cdr.reattach();

            this.cdr.markForCheck();
            this.cdr.detectChanges();

            console.log(' after ---> ', this.isDetached);
            console.log(' after ---> ', this.canDetach);
        } else {
            console.log(' before ---> ', this.canDetach);
            console.log(' before ---> ', this.isDetached);
            this.isDetached = true;
      this.canDetach = true;
      this.justToggleValue = true;
            ++this.changedValue;
            this.cdr.detach();
            console.log(' after ---> ', this.isDetached);
            console.log(' after ---> ', this.canDetach);
        }
    }