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组件。

P.S。以下是此项目的github存储库：https://github.com/balteo/demo-angular2-rxjs/tree/WITH-ROUTER

修改：

我仍在尝试找到解决此问题的方法。我的路由器或组件出了问题。我已将应用程序推送到github here，希望有人可以提供建议。

Answer 1

＆gt; = 2.3.0-rc.0

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

＆gt; = 2.0.0

CanReuse在新路由器中不再存在。当只有路线参数在停留在同一路线上时发生变化时，不会重新创建该组件。

如果路线已更改并导航回同一组件，则会重新创建该组件。

<强>＆LT = RC.x

请注意，我明确要求通过在那里添加提供程序数组，在根级别组件中实例化第一个和第二个组件。

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

您可以实施CanReuse

添加

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

到您的组件，但是对于重用相同实例的哪种导航（如果您保持在同一路线并且仅更改参数），它非常有限。

如果CanReuse没有解决您的问题，请将数据移至保存实例的服务，并将组件的视图绑定到此服务的数据，以使组件显示当前数据。

Answer 2

绝对预期的行为是在路线改变时构建和销毁组件。

请记住，组件与模板的DOM元素密切相关。随着这些dom元素被移除或改变，组件也必须被破坏并且构造新组件。

有一些例外情况，但不是因为它与您的用例有关（例如另一个答案中提到的CanReuse方法，但这意味着完全不同的东西。

CanReuse的作用是什么，从路线（让我们称之为route1）到另一条路线（route2），两条路线都使用相同的组件{ {1}}，如果你告诉它允许重新使用该组件，它基本上是这样说的：

＆＃34;由于我所使用的路线也使用与我当前所使用的路线完全相同的组件类型，因此可以重新使用我当前的组件实例。新路线＆＃34; （也许是因为它是无国籍的）。

您不能确切地说出您要实现的目标，或者为什么仅将您的两个组件实例化一次非常重要，但通常情况下，组件并非旨在存储长期应用程序状态（或更确切地说，表示超出与组件相关联的dom元素的生命周期。这些东西应该存在于其他地方（例如服务中），并通过注入（或作为输入传入）在组件之间共享。

Answer 3

＆＃34;绝对预期的行为是，当您的路线发生变化时，组件将被构建和销毁＃34;

关键是组件不应该一次又一次地重建，因为一个链路在两个链路之间来回导航（彼此不同）。如果您在一个链接上修改了复杂的图形和状态，并且在您返回以恢复工作时该对象被销毁并重新创建，该怎么办？

框架不应该规定是否应该销毁对象并一次又一次地重新创建。它应该提供两个选项，并且在默认选项中，它不应该销毁和重新创建，因为这是直观的行为。这是大多数UI框架多年来使用的行为。

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

3 个答案: