Angular2 防止在路由更改时破坏组件答案

【问题标题】：Angular2 prevent destroying a Component on route changeAngular2 防止在路由更改时破坏组件
【发布时间】：2017-04-28 22:23:58
【问题描述】：

我为我的 angular2 应用程序使用 angular-seed 模板。我写了一个简单的秒表。如果我启动计时器并更改路线，组件将被销毁并且计时器停止。我怎样才能防止这种情况？计时器应该在后台工作。

import {Component, ElementRef} from "@angular/core";
import {WindowService} from "../services/window.service";

@Component({
    selector: 'timer',
    template: `<div>
                <span>0</span><br>
                <button (click)="start()">start</button>
                <button (click)="stop()">stop</button>
                </div>`
})

export class TimerDirective {

    private running:boolean;
    private time:number;
    private results:Array<any>;
    private laps:Array<string>;
    private times:Array<number>;
    private win:any;
    private timeEnd:any;


    constructor(private el: ElementRef, private winA: WindowService) {
        console.log("time");

        this.running = false;
        this.time = -1;
        this.results = [];
        this.laps = [];
        this.times = [0, 0, 0];
        this.win = window;
        this.timeEnd = performance;

    }

    ngOnDestroy() {
        this.winA.alert("no please");
    }
    public reset() {
        this.times = [0,0,0];
    }

    public stop() {
        this.running = false;
        this.time = -1;
    }

    public start() {
        if(this.time === -1) {
            this.time = this.timeEnd.now();
        }
         if(this.running == false) {

            this.running = true;
            requestAnimationFrame(this.step.bind(this));
        }
    }

    public step(timestamp:any) {
        if(this.running == false) {
            return;
        }
        this.calculate(timestamp);
        this.time = timestamp;
        this.print();
        requestAnimationFrame(this.step.bind(this));
    }

    public calculate(timestamp:any) {
        let diff = timestamp - this.time;

        this.times[2] += diff / 10;

        if (this.times[2] >= 100) {
            this.times[1] += 1;
            this.times[2] -= 100;
        }

        if (this.times[1] >= 60) {
            this.times[0] += 1;
            this.times[1] -= 60;
        }
    }

    public print() {
        let elSpan = this.el.nativeElement.querySelector('span');
        elSpan.innerHTML = this.times;

    }
}

【问题讨论】：

@günter-zöchbauer 这不是那个问题的重复。

标签： javascript angular components

【解决方案1】：

您应该使用使用@Injectable 的服务，然后您将能够导航不同的路线并且仍然可以进行秒表计数。

这是一个笨拙的例子： https://embed.plnkr.co/mKThXNaMIlBUMlkXwjr5/

【讨论】：

【解决方案2】：

你为什么不把你的组件放在一个父组件中，如果应用程序处于你想要的状态，就隐藏或显示它。（不需要为它指定特殊的路由）。

【讨论】：