javascript - 分配给复选框更改的 bool 值上的 ngOnChanges 未捕获

Question

在 html 中，我有带有两种方式数据绑定(bind)的复选框输入:

<label class="switch">
    <input type="checkbox" [(ngModel)]="mode">
    <span class="slider round"></span>
</label>
{{ mode }}

在 component.ts 中，我想在模式改变时改变路线。为此，我尝试使用 ngOnChanges 模块监听模式更改。我的代码是:

import { Component, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-modes',
    templateUrl: './modes.component.html',
    styleUrls: ['./modes.component.scss']
})

export class ModesComponent implements OnInit, OnChanges {
    @Input() mode: boolean;
    constructor(private router: Router) { }

    ngOnInit() { }

    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
        this.router.navigate(['/dark']);
    }
}

但是 ngOnChanges 永远不会执行，尽管通过插值我可以看到模式正在改变。它从不控制台任何东西，但它应该控制台对象。

Answer 1

根据您的代码，没有问题，除了您如何使用app-modes，它应该如下所示:

<app-modes [mode]='mode'></app-modes>

<强> WORKING DEMO