Question

我有一个问题，Angular2解析器被多次实例化。

这是我的功能模块声明（路由器懒洋洋地加载）：

const ROUTES: Route[] = [
    {

        path: '',
        component: ScreenParentComponent,
        children: [
            {
                path: '',
                component: InnerScreenParentComponent,
                children: [
                    {
                        path: '',
                        pathMatch: 'full',
                        redirectTo: 'urlA'
                    },
                    {
                        path: 'urlA',
                        component: ChildComponentA,
                        resolve: [ResolverA, ResolverB]
                    }
                ]
            }
        ]
    }
];

@NgModule({
    providers: [
        ResolverA,
        ResolverB
    ],
    declarations: [
        InnerScreenParentComponent,
        ChildComponentA
    ],
    imports: [
        SharedModule,
        RouterModule.forChild(ROUTES)
    ]
})
export class MyFeatureModule {

}

这是有问题解析器的代码（我们称之为ResolverA）：

import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs";
import {AuthHttp} from "angular2-jwt";

@Injectable()
export class ResolverA implements Resolve<IDataDto> {

    private API_URL = '...';
    private _reasons: IDataDto[];

    constructor(private http: AuthHttp) {
        console.log("Resource NEW");
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
        console.log("Resource RESOLVE");
        return this.http.get(this.API_URL)
            .map(result => result.json())
            .do(result => this._reasons = result);
    }

    get reasons(): IDataDto[] {
        return this._reasons;
    }

}

export interface IDataDto {
    reasonCode: string,
    description: string,
    gainLossType: GainLossType

}

export type GainLossType = "GAIN" | "LOSS";

还有一个组件：

// All needed imports   

@Component({
    selector: 'componentA',
    template: require('./componentA.template.html')
})
export class ComponentA implements OnInit {


    constructor(private router: Router,
                private timeResolver: TimeResolver,
                private resolverA: ResolverA,
                private messageService: MessageService) {

    }

    ngOnInit(): void {

        // other UI initialization code

        this.initData();
    }


    private initData() {
        let reasons = this.resolverA.reasons; //UNDEFINED!
        console.log("Reasons:", reasons);
    }    
}

问题是，此ResolverA实例化了两次（并且仅在一个实例中解析）。第二个实例（注入组件）具有未解析的数据。实际上，第二个实例甚至不应该存在，解析器应该是单例。

在这种情况下控制台输出：

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Resource NEW
Resource RESOLVE
Resource NEW //THIS SHOULDN'T BE HERE
Reasons: undefined
Reasons: undefined

按角度2.1.2预期工作，但角度2.2.4无效。打字稿版本：2.0.10

我的代码是否有问题（自角度2.2以来发生了变化）或者它被认为是Angular中的错误？

Answer 1

有一个已知的问题，即延迟加载的模块中的提供程序被多次实例化

angular2解析器多次实例化

1 个答案: