0

我正在尝试通过流星 -Angular2 教程运行，我已达到此页面上的第 8 节：

http://www.angular-meteor.com/tutorials/socially/angular2/user-accounts-authentication-and-permissions

代码片段 8.9 显示：

app.routes.ts（适合 RC4 的原始版本）

import { RouterConfig, provideRouter } from '@angular/router';
import { Meteor } from 'meteor/meteor';

import { PartiesListComponent } from './imports/parties/parties-list.component';
import { PartyDetailsComponent } from './imports/parties/party-details.component';

const routes: RouterConfig = [
  { path: '', component: PartiesListComponent },
  { path: 'party/:partyId', component: PartyDetailsComponent, canActivate: ['CanActivateForLoggedIn'] }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
  { provide: 'CanActivateForLoggedIn', useValue: () => !! Meteor.userId() }
];

然而，这是针对 Angular 2 RC4 的。到目前为止，我已经修改了我的应用程序以使用 RC5。我的同一个文件如下所示：

app.routes.ts（由我修改以适应 RC5）

import {RouterModule, Routes} from '@angular/router';
import { Meteor } from 'meteor/meteor';
import {PartiesListComponent} from './imports/parties/parties-list.component';
import {PartyDetailsComponent} from './imports/parties/party-details.component';

const ROUTES: Routes = [
    { path: '', component: PartiesListComponent },
    { path: 'party/:partyId', component: PartyDetailsComponent, canActivate: ['CanActivateForLoggedIn'] }
];

export const APP_ROUTES = RouterModule.forRoot(ROUTES);

export const APP_ROUTER_PROVIDERS: any[] = [
    { provide: 'CanActivateForLoggedIn', useValue: () => !! Meteor.userId() }
];

app.module.ts

...  
@NgModule({
        imports: [
            APP_ROUTES,
            BrowserModule,
            MeteorModule,
            FormsModule,
            ReactiveFormsModule],
        declarations: [
            AppComponent,
            PartiesFormComponent,
            PartiesListComponent,
            PartyDetailsComponent,
            LoginButtons
        ],
        providers: [
            FormBuilder,
            APP_ROUTER_PROVIDERS   // from app.routes.ts
        ],
        bootstrap: [
            APP_ROUTER_PROVIDERS,
            AppComponent
        ]
    })
    export class AppModule { }

但是 angular 2 不喜欢 中的对象APP_ROUTER_PROVIDERS并报告以下堆栈跟踪：

metadata_resolver.js:551Uncaught Can't resolve all parameters for [object Object]: (?).CompileMetadataResolver.getDependenciesMetadata @ metadata_resolver.js:551CompileMetadataResolver.getTypeMetadata @ metadata_resolver.js:448(匿名函数) @ metadata_resolver.js:313CompileMetadataResolver.getNgModuleMetadata @metadata_resolver.js:313RuntimeCompiler._compileComponents @runtime_compiler.js:150RuntimeCompiler._compileModuleAndComponents @runtime_compiler.js:72RuntimeCompiler.compileModuleAsync @runtime_compiler.js:49PlatformRef_._bootstrapModuleWithZone @application_ref.js:368PlatformRef_.bootstrapMedule @application_ref.js:361.client. .js@main.ts:12fileEvaluate@install.js:153require@install.js:82（匿名函数）@party.collection.ts:16

我在这里做错了什么，如何解决？

非常感谢

捷通

4

1 回答 1

0

我没有在app.routes中声明 APP_ROUTE_PROVIDERS 常量，而是添加了

{ provide: 'CanActivateForLoggedIn', useValue: () => !! Meteor.userId() }

在app.module中作为装饰器providers下的一个@NgModule。现在这是我的代码：

@NgModule({
    imports: [
        APP_ROUTES,
        BrowserModule,
        MeteorModule,
        FormsModule,
        ReactiveFormsModule],
    declarations: [
        AppComponent,
        PartiesFormComponent,
        PartiesListComponent,
        PartyDetailsComponent,
        LoginButtons
    ],
    providers: [
        FormBuilder,
        { provide: 'CanActivateForLoggedIn', useValue: () => !! Meteor.userId() }
    ],
    bootstrap: [
        AppComponent
    ]
})

希望这可以帮助某人。

捷通

于 2016-08-29T03:35:34.100 回答