小编tru*_*k18的帖子

我正在构建一个版本为beta.8的Angular 2应用程序.
在这个应用程序中,我有一个实现OnInit的组件.
在这个组件中我有函数ngOnInit,但从不调用ngOnInit函数.

import { Component, OnInit } from 'angular2/core';

@Component({
  templateUrl: '/app/html/overview.html'
})

export class OverviewComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit');
  }
}

应用程序的路由:

@RouteConfig([
  {
    path: '/overview',
    name: 'Overview',
    component: OverviewComponent
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterComponent,
    useAsDefault: true
  }
])

检查用户是否已登录LoginComponent和RegisterComponent.
如果用户已登录,则组件将使用以下方式重定向到Overview : router.navigate(['Overview']).
如果我使用Overview路由作为默认路由,我会在控制台中看到ngOnInit.
所以我重定向我的页面的方式似乎是问题.
如何重定向到Overview页面并调用ngOnInit函数？

无论是RegisterComponent和LoginComponent使用

ngOnInit() {
  this._browser.getStorageValue('api_key', api_key => {
    if (api_key) {
      this._browser.gotoMain();
    }
  }) …

我有一个带有几个嵌套子视图的Angular 2应用程序.但它会显示在同一页面上router-outlet.

const routes: Routes = [
    {
        path: 'queue/:date/:offset/:type',
        component: BundleListComponent,
        resolve: {
            response: BundleListResolve
        },
        children: [
            {
                path: ':bundleId', component: PointListComponent,
                resolve: {
                    response: PointListResolve
                },
                children: [
                    {
                        path: ':pointId', component: TaskListComponent,
                        resolve: {
                            response: TaskListResolve
                        },
                        children: [
                            {
                                path: ':taskId', component: TaskDetailComponent,
                                resolve: {
                                    response: TaskDetailResolve
                                }
                            },
                            { path: '', component: EmptyComponent }
                        ]
                    },
                    { path: '', component: EmptyComponent }
                ]
            },
            { path: '', component: EmptyComponent }
        ]

    }, …

我是ngrx/store的初学者,这是我使用它的第一个项目.

我已经使用ngrx/store成功设置了我的角度项目,并且我可以在初始化主要组件后调度一个加载操作,如下所示:

ngOnInit() { this.store.dispatch({type: LOAD_STATISTICS}); }

我已设置一个效果,以便在调度此操作时加载数据:

@Effect()
loadStatistik = this.actions.ofType(LOAD_STATISTICS).switchMap(() => {
    return this.myService.loadStatistics().map(response => {
        return {type: NEW_STATISTICS, payload: response};
    });
});

我的减速机看起来像这样:

reduce(oldstate: Statistics = initialStatistics, action: Action): Statistik {
    switch (action.type) {
        case LOAD_STATISTICS:
            return oldstate;
        case NEW_STATISTICS:
            const newstate = new Statistics(action.payload);

            return newstate;
    ....

虽然这有效,但我无法理解如何使用路由器防护,因为我目前只需要调度一次LOAD_ACTION.

此外,组件必须调度LOAD操作,加载初始数据对我来说听起来不对.我希望商店本身知道它需要加载数据,我不必先调度一个动作.如果是这种情况,我可以删除组件中的ngOnInit()方法.

我已经查看了ngrx-example-app,但我还没有真正了解它是如何工作的.

编辑:

添加一个返回ngrx-store observable的解析防护后,该路由不会被激活.这是决心:

   @Injectable()
  export class StatisticsResolver implements Resolve<Statistik> {
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Statistik> {
        // return Observable.of(new Statistik());
        return this.store.select("statistik").map(statistik => {
        console.log("stats", statistik); …

我正在寻找一个可以遵循的步骤,将Angular添加到现有的MVC应用程序中,该应用程序位于我的解决方案区域.我找到了一个编写,告诉我如何使用gulp.js文件添加角度,该文件提取必要的node_modules并将我的ts文件转换为js文件.我想用webpack做同样的事情.

目前我的package.json看起来像这样.

{
    "version": "1.0.0",
    "name": "aspnet",
    "private": true,
    "scripts": {},
    "dependencies": {
        "@angular/animations": "4.3.5",
        "@angular/common": "4.3.5",
        "@angular/compiler": "4.3.5",
        "@angular/compiler-cli": "4.3.5",
        "@angular/core": "4.3.5",
        "@angular/forms": "4.3.5",
        "@angular/http": "4.3.5",
        "@angular/platform-browser": "4.3.5",
        "@angular/platform-browser-dynamic": "4.3.5",
        "@angular/platform-server": "4.3.5",
        "@angular/router": "4.3.5",
        "@angular/upgrade": "4.3.5",
        "angular-in-memory-web-api": "0.3.2",
        "bootstrap": "3.3.7",
        "core-js": "2.5.0",
        "ie-shim": "0.1.0",
        "rxjs": "5.4.3",
        "zone.js": "0.8.16",
        "systemjs": "^0.20.18"
    },
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-clean": "^0.3.2",
        "gulp-concat": "^2.6.1",
        "gulp-tsc": "~1.3.2",
        "gulp-typescript": "^3.2.2",
        "path": "^0.12.7",
        "typescript": "^2.4.2"
    }
}

这是我遵循的写作,使用gulp,这是有效的.

但我更愿意使用webpack而不是gulp任务.

我使用Angular Google Maps(AGM)组件.我需要在标记鼠标悬停上打开信息窗口.如何infowindow在我的函数中检索实例onMouseOver以打开它？

<agm-map [fitBounds]="latlngBounds" [zoom]="15">
    <agm-marker *ngFor="let m of markers; let i = index"
                [latitude]="m.geoCode.latitude"
                [longitude]="m.geoCode.longitude"
                (mouseOver)="onMouseOver(m)"
                >

        <agm-info-window [disableAutoPan]="false">

            <div>
                <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">test<i class="fa fa-angle-double-right"></i></a>
            </div>

        </agm-info-window>


    </agm-marker>

</agm-map>



onMouseOver(data) {
        ???? /* how to open here the info window?
    }

我在Angular中使用routerLink如下

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

因此，当URL看起来像.active类时已将其添加到li标记中

/view/10?offset=0&numberOfItems=100

如果URL被更改offset或numberOfItems更改为其他值，则.active类将被删除，例如。

/view/10?offset=0&numberOfItems=120

我浏览了有角度的文档，并设法通过添加另一个routerLink使它工作，但如下所示将其隐藏。

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
    <a [routerLink]="['/view', 10]" style="display:none;">                
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

似乎以上方法有点小技巧。当路由器参数与可选查询参数一起出现时，是否可以设置任何配置以使routerLinkActive起作用？

TLDR；我想使用 debounceTime 仅在 300 毫秒过去了而没有被调用的情况下执行该函数。同时，如果这个过程需要很长时间，我也希望能够每1分钟触发一次该功能。否则，该功能只会在流程结束时触发。

基本上，我们的系统有一个很长的过程，会向客户端发出大量 SignalR 更新。当我在客户端收到服务器命令时，我将向服务器发送 2 个额外的 HTTP 请求以获取一些信息。这样只要服务器向我发送更新，它就会回击服务器。

debounceTime如果两个命令之间的时间在 300 毫秒内，我正在使用以防止将太多请求发送回服务器。但是有一种用例，即服务器在 1 小时内不断向客户端发送更新。这意味着客户端将在 1 小时和 300 毫秒触发 getItemCount。

export class LeftNavigationComponent implements OnInit, OnDestroy {
    typeACount: number = 0;
    typeBCount: number = 0;    

    constructor(
        private itemService: service.ItemService,        
        private signalR: service.SignalRService) { }

    ngOnInit(): void {
        this.subscriptions = [            
            this.signalR.itemCreated.debounceTime(300).subscribe(item => this.onUpdatingData())]
    }

    onUpdatingData() {
        Promise.all([
            this.itemService.getItemCount(APP_SETTING.TYPE_A),
            this.itemService.getItemCount(APP_SETTING.TYPE_B)])
            .then(response => this.gettingCountDone(response))
    }

    gettingCountDone(response) {
        this.typeACount = <any>response[0];
        this.typeBCount = <any>response[1];        
    }
}

我还是想debounceTime防止向服务器发送太多请求。但是它应该足够智能，可以在收到第一个更新后每例如 1 …

TypeScript到目前为止，以下代码是我一直用来定义构造函数的代码。

export class DashboardComponent {
    private heroService: HeroService;
    constructor(heroService: HeroService){
        this.heroService = heroService
    }
}  

但最近当我检查Angular 2 文档时，我看到语法更短，看起来像

export class DashboardComponent {
    constructor(private heroService: HeroService){}
}   

编译后的 JavaScript 是一样的

var DashboardComponent = (function () {
    function DashboardComponent(heroService) {
        this.heroService = heroService;
    }
    return DashboardComponent;
}());

因为TypeScript 文档中仅显示第一种类型，所以我只想确保两个类型相同，并且我对这两种类型的处理都正确。

感谢有人可以帮我确认一下吗？

我已将应用程序部署到UAT，但是无法直接在移动设备上运行我的应用程序，因为它直接进入了access-denied（401）页面。我认为这是由于访问令牌问题。

我主要有2个拦截器来处理我的应用程序。1.错误拦截器-处理任何路由错误或未经授权的错误。2. jwt-分配令牌，该令牌在内部调用身份验证服务以获取令牌。

以下是我的服务文件，在该文件中，我试图通过发送准备好接收令牌的postMessage来获取会话或本地或窗口事件中的访问令牌。

身份验证服务

public getToken() {
    let accessToken = null;
     const auth = JSON.parse(sessionStorage.getItem('auth'));
    if (auth) {
        accessToken = auth.access_token;
    } elseif (accessToken == null || accessToken === undefined) {
        accessToken = localStorage.getItem('access_token');
    }

 window.addEventListener('message', function(event){
      // this event should have all the necessary tokens
 }, false);

 // once my page is loaded to indicate that I am ready to receive the message from server side.
  parent.postMessage({ askForToken:"true"}, "*");

  return accessToken;
}

我正在发送parent.postMessage以使window.addEventListener能够检索数据，但事件未按预期发送令牌。

我正在authentication.service.ts中执行所有上述代码实现，所以不确定是否正确的方法。

任何人都可以建议我正确的方法来实现此代码并适当地接收令牌吗？

请纠正我，因为我是第一次尝试使用令牌进行部署。