为什么每次更改路径时我的angular2组件都会重新实例化？

Question

我正在尝试组装一个Angular 2 + Rx.JS 5/Next 的演示应用程序.

我注意到每次切换路由时都会重新实例化我的组件.

以下是根应用程序的代码:

import {bootstrap}    from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);

以下是根组件的代码:

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";


@Component({
    selector: 'my-app',
    providers: [AppService, FirstComponent, SecondComponent],
    directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
    template: `<h1>An Angular 2 App</h1>
               <a [routerLink]="['First']">first-default</a> 
               <a [routerLink]="['Second']">second</a> 
               <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
    {path: '/second', name: 'Second', component: SecondComponent}
])
export class AppComponent {
}

然后是第一个组件的代码(映射到/):

import {Component, OnInit, NgZone} from "angular2/core";
import {AppService} from "./app.services.ts";
import 'rxjs/Rx';


@Component({
    selector: 'my-first',
    template: `
<div>
    <ul>
        <li *ngFor="#s of someStrings">
           a string: {{ s }}
        </li>
    </ul>
 </div>`
})
export class FirstComponent implements OnInit {

    zone:NgZone;

    constructor(private appService:AppService) {
        console.log('constructor', 'first');
        this.zone = new NgZone({enableLongStackTrace: false});
    }

    someStrings:string[] = [];

    ngOnInit() {
        console.log('ngOnInit', 'first');
        this.appService.refCounted.subscribe(
            theStrings=> {
                this.zone.run(() =>this.someStrings.push(...theStrings));
            },
            error=>console.log(error)
        );
    }
}

第二个组件(映射到/second):

import {Component, OnInit, NgZone} from "angular2/core";
import {AppService} from "./app.services.ts";

@Component({
    selector: 'my-second',
    template: `
<div>
    <ul>
        <li *ngFor="#s of someStrings">
           a string: {{ s }}
        </li>
    </ul>
 </div>`
})
export class SecondComponent implements OnInit {

    zone:NgZone;

    constructor(private appService:AppService) {
        console.log('constructor', 'second');
        this.zone = new NgZone({enableLongStackTrace: false});
    }

    someStrings:string[] = [];

    ngOnInit() {
        console.log('ngOnInit', 'second');
        this.appService.refCounted.subscribe(
            theStrings=> {
                this.zone.run(() =>this.someStrings.push(...theStrings));
            },
            error=>console.log(error)
        );
    }
}

最后是应用程序服务(与此问题略有不同):

import {Injectable} from "angular2/core";
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import 'rxjs/Rx';


@Injectable()
export class AppService {

    constructor(){
        console.log('constructor', 'appService');
    }

    someObservable$:Observable<string[]> = Observable.create(observer => {
        const eventSource = new EventSource('/interval-sse-observable');
        eventSource.onmessage = x => observer.next(JSON.parse(x.data));
        eventSource.onerror = x => observer.error(console.log('EventSource failed'));

        return () => {
            eventSource.close();
        };
    });

    subject$ = new Subject();

    refCounted = this.someObservable$.multicast(this.subject$).refCount();

    someMethod_() {
        let someObservable$:Observable<string[]> = Observable.create(observer => {
            const eventSource = new EventSource('/interval-sse-observable');
            eventSource.onmessage = x => observer.next(JSON.parse(x.data));
            eventSource.onerror = x => observer.error(console.log('EventSource failed'));

            return () => {
                eventSource.close();
            };
        });
        return someObservable$;
    }
}

所以为了调试First和Second组件的实例化,我在构造函数/ ngOnInit中添加了一个console.log:

我注意到每次通过点击链接改变路线,我得到:

constructor first
ngOnInit first

constructor second
ngOnInit second
...

有人可以告知这是否是预期的行为？如果是这样,我怎么能让Angular2只实例化我的组件一次？

请注意,我明确要求通过在那里添加数组来在根级别组件中实例化First和Second组件providers.

PS这是这个项目的github存储库:https://github.com/balteo/demo-angular2-rxjs/tree/WITH-ROUTER

编辑:

我仍在努力找到解决这个问题的方法.我的路由器或组件出了问题.我已将应用程序推送到github ,希望有人可以提供建议.

Answer 1

> = 2.3.0-rc.0

RouteReuseStrategy可以实现自定义以控制何时销毁和重新创建或重用路由组件.

• https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html
• https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx
• https://github.com/angular/angular/issues/7757

> = 2.0.0

CanReuse在新的路由器中不再存在.当只有路由参数在停留在同一路径上时发生更改时,不会重新创建该组件.

如果路径已更改并导航回同一组件,则会重新创建组件.

<= RC.x

请注意,我已明确要求通过在其中添加providers数组来在根级别组件中实例化First和Second组件.

添加组件providers: []几乎毫无意义,尤其是在此问题上.

您可以实现CanReuse

通过增加

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }

对于您的组件,但是对于重用相同实例的哪种导航(如果您保持相同的路由并且仅更改参数),这是非常有限的.

如果CanReuse不能解决您的问题,请将数据移动到保留实例的服务,并将组件的视图绑定到此服务的数据,以使组件显示当前数据.