相关疑难解决方法(0)

我试图在组件呈现之前从我的API加载一个事件.目前我正在使用我的API服务,我从组件的ngOnInit函数调用它.

我的EventRegister组件:

import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';

@Component({
    selector: "register",
    templateUrl: "/events/register"
    // provider array is added in parent component
})

export class EventRegister implements OnInit {
    eventId: string;
    ev: EventModel;

    constructor(private _apiService: ApiService, 
                        params: RouteParams) {
        this.eventId = params.get('id');
    }

    fetchEvent(): void {
        this._apiService.get.event(this.eventId).then(event => {
            this.ev = event;
            console.log(event); // Has a …

我想显示使用欧洲格式的日期dd/MM/yyyy,但使用DatePipe shortDate格式只使用美国日期格式显示MM/dd/yyyy.
我假设默认语言环境是en_US.也许我在文档中遗漏了但是如何更改Angular2应用程序中的默认语言环境设置？或者是否有某种方法可以将自定义格式传递给DatePipe？

useValue和useFactory提供者有什么区别？

它似乎useFactory返回一个值,useClass也是一样的.

此示例显示如何在子组件上使用@Input()批注.我的问题是你如何在根组件上使用它？例如,如果您修改上面链接上的代码:

@Component({
selector: 'app',
template: `
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
`,
directives: [BankAccount]
})
class App {
    @Input() something: string;
}

bootstrap(App);

并在HTML中:

<app something="Test"></app>

上面的示例永远不会更新App组件上的某些属性.

我正在使用Angular2 RC5.我希望能够在我的应用程序启动之前加载我的服务器IP地址和一些其他配置参数.我怎样才能在最新的RC5中做到这一点？

我看过其他文章,但它们没有帮助:

1. 如何在angular2中预加载配置文件:这里提供的答案特定于webpack.我正在使用systemjs.
2. https://medium.com/@hasan.hameed/reading-configuration-files-in-angular-2-9d18b7a6aa4#.m8lontnas:这是针对Angular2的旧版本.使用的某些类已弃用.

任何帮助将不胜感激.

编辑

我尝试在app.module.ts中使用APP_INITIALIZER,如下所示:

    import { NgModule, provide, APP_INITIALIZER }       from "@angular/core";
    import { ConfigService } from "./shared/services/config.service";
    @NgModule({
        declarations: [AppComponent],
        imports: [BrowserModule,
            routes,
            FormsModule,
            HttpModule],
        providers: [AuthService,
            Title,
            appRoutingProviders,
            ConfigService],
        bootstrap: [AppComponent
            , provide(APP_INITIALIZER,
                {
                    useFactory: (config: ConfigService) => () => config.load(),
                    deps: [ConfigService], multi: true
                })]
    })
    export class AppModule { }

这是我的config.service.ts文件:

    import { Config } from "../model/config";

    export class ConfigService {
        constructor() {
        }

        load(): Promise<Config> {
            let config: Config …

我正在使用APP_INITIALIZER,就像在这个答案中推荐的那样,我的服务返回一个承诺,但它并不总是等待它解决,我可以看到我的组件console.logging未定义,然后服务记录下载的对象.

我需要应用程序在加载此数据之前不做任何事情.

app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Http, HttpModule, JsonpModule } from '@angular/http';
import { UserService } from '../services/user.service';

<...>
@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    JsonpModule,
    routing
  ],
  declarations: [
    AppComponent,
    <...>
  ],
  providers: [
    <...>
    UserService,
    {provide: APP_INITIALIZER,
      useFactory: (userServ: UserService) => () => userServ.getUser(),
      deps: [UserService, Http],
      multi: true
    }
  ],
  bootstrap: [AppComponent]

user.service.ts

@Injectable()
export class UserService {

    public user: User;
    constructor(private http: Http) { }

    getUser(): Promise<User> { …

我想建立一个异步工作的工厂来返回服务,然后将该工厂提供给工厂提供商,以便在加载时为组件提供该服务.

然而,当供应商将注入TestService到TestComponent,在运行时类型ZoneAwarePromise.我需要一种方法让提供程序在将服务注入组件之前自动"等待"promise.

服务

export class TestService {
 public test() {
   return 123;
 }
}

提供者和工厂

export function testFactory(auth: any, temp: any) {
  return new Promise((res, rej) => {
    res(new TestService());
  });
}

export let testProvider =
{
  provide: TestService,
  useFactory: testFactory,
  deps: []
};

应用模块

providers: [
    testProvider
]

TestComponent

import { Component, OnInit } from '@angular/core';
import { TestService } from './Test';

@Component({
    selector: 'app-test'
})
export class TestComponent implements OnInit {
    constructor(private …

在Angular2中我们可以使用Resolve如下:

import { UserResolver } from './resolvers/user.resolver.ts';

export const routes: RouterConfig = [
  {
    path: 'users/:id',
    component: UserComponent,
    resolve: {
      transaction: UserResolver
    }
  }
];

但是,我怎样才能最好地应用解析器来运行,例如,我的app.component.ts？也许当网站第一次加载时,无论首次加载哪个页面,我都需要先获取用户数据(例如).那么如何让这个解析器应用于路线层次结构的下方呢？

在Angular 2应用程序或一般的JavaScript应用程序中,外部化字符串常量的方法是什么？我的意思是类似于.propertiesJava中的文件,其中存储了后端连接属性.

据我所知,JavaScript不支持轻松地从客户端读取文件.我目前的解决方案是使用可注入服务类,它将键值对存储为对象属性.然后我只是将服务注入需要这些值的其他服务中.这是合理的方法,还是JavaScript/A2提供了一些更统一的方法来处理价值注入？

好的,所以我在ASP.Net SPA项目的_Layout.cshtml中有一个常量变量,我会传递它们,以便Angular可以访问这些变量.

我怎样才能做到这一点？

例如,这是我试图转移的一个值.

var lenderValues = @Html.Action("GetLenderDropdownValues", "Dropdown");

这是我的第一个app.component启动的方式.

<my-rite-ui>Loading...</my-rite-ui>

我知道如何在AngularJS 1.x中使用常量并注入需要的常量,但无法在Angular中找到它.

任何帮助将受到高度赞赏.