相关疑难解决方法(0)

我试图在每个新路由上切换(隐藏/显示)加载gif,所以我的逻辑是:

• routeChangeStart = show加载gif
• routeChangeSuccess =隐藏加载gif

这是我的代码:

//ANGULAR
app.run(function($rootScope) {

   $rootScope.layout = {};
   $rootScope.layout.loading = false; 

   $rootScope.$on('$routeChangeStart', function() {

      //show loading gif
      $rootScope.layout.loading = true;

   });

   $rootScope.$on('$routeChangeSuccess', function() {

      //hide loading gif
      $rootScope.layout.loading = false;

   });

   $rootScope.$on('$routeChangeError', function() {

       //hide loading gif
       alert('wtff');
       $rootScope.layout.loading = false;
   });
});

// HTML

<img src="img/loading.gif" ng-hide="!layout.loading"/>

这很奇怪,因为这适用于3/4路线改变然后它在更改路线时停止工作:O

可能是什么？

感谢@Rob Sedgwick,这是一个实际的例子:http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b

我是Angular场景中的新人.我刚刚开始学习TypeScript的Angular 2.0,我想知道动画(如简单的带有jQuery的HTML)如何在Angular 2.0中运行

在Angular 2.0(angular.io> Features)的主页中,您可以看到,有一种方法可以在"Angular 2.0 for TypeScript"中进行动画制作.

在我的研究中,我发现了这样的东西:http: //www.angular-dev.com/angular-connect-slides/#/26/0/

但我认为这只是一个普通的JavaScript代码.而且我不确定ngAnimate 2.0是否是我想要的.

不幸的是,我找不到更多相关信息.

我想做的事情非常简单:

当我在一个简单的div容器中单击时,我希望出现另一个div容器(这在开始时是不可见的).

在jQuery中,它将是这样的:http://www.w3schools.com/jquery/tryit.asp？filename = tryjquery_eff_toggle

但我想要的是TypeScript中的这个动画.你知道我是如何实现这个目标的吗？

感谢您提前的答案!

编辑 对不起,我忘了提,我究竟想要什么.我想使用切换,但在Windows 10中是这样的:

当您按"Windows + A"时,它将在右侧显示侧栏.正是这就是我想要的网站动画,当你点击一个div容器,而不只是简单的出现和消失.

我认为jQuery代码就是这样的(仅用于出现时间延迟)

$("divA").click(function() {
    $("divB").toggle(1000);
});

正如标题所说,我想拥抱rxjs Observables的力量.

我现在应该做什么:

// dataview.html
<div *ngIf="isLoading">Loading data...div>
<ul *ngIf="!isLoading">
    <li *ngFor="let d of data">{{ d.value }}</li>
</ul>


// dataview.ts

data: any[] = [];
isLoading: boolean = false;

getData() {

this.isLoading = true;
this._api.getData().subscribe(
        data => {
            this.data = data;
            this.isLoading = false;
        },
        error => {
            this.error = error;
            this.isLoading = false;
        });
}

我想做的事:

1. async在我的模板中使用管道

2. 创建data一个Observable数组

3. 仍显示用户的加载信息

我是干净代码的忠实粉丝,那么如何使用rxjs和Angular 2很好地完成这项工作呢？

我想要做的是:每当http请求诅咒时我都想使用微调器.换句话说,每当我的app.component中发生http请求时,我希望用户看到加载屏幕.
我的spinner.component和spinner-service文件与此问题中的答案相同.
我的app.component的组件是

@Component({
    selector: 'todoApi',
    template: `
        <div class="foo">
            <spinner-component></spinner-component>
            <h1>Internship Project</h1>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Tasks']">List</a>
            <router-outlet></router-outlet>
        <div>
    `,
    directives: [ROUTER_DIRECTIVES,SpinnerComponent],
    providers: [
        ROUTER_PROVIDERS,
    ]
})

@RouteConfig([
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },{
        path: '/tasks',
        name: 'Tasks',
        component: TaskComponent
    },{
        path: '/detail/:id',
        name: 'TaskDetail',
        component: TaskDetailComponent
    },
])

总而言之,每当在这些路线之一中发生http请求时,我想向用户显示微调器.我知道这是一个不好的问题,但我是棱角分明2的新手,如果有人能帮助我,我真的很感激.
非常感谢!
编辑!:
解决方案与半滑舌鳎的回答是:我包裹着我http和spinner-service成HttpClient组件,并用它来代替普通的HTTP模块.这是我的HttpClient组件:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http'; …

当解析器执行某些工作时，是否可以显示微调器而不是空页面？

我有一个带有两个解析器的模块：

 const routes: Routes = [
  {
    path: '',
    component: MyComponent,
    canActivate: [MyAuthGuard],
    resolve: {
      vehicles: FirstResolve,
      drivers: SecondResolve
    },
    children: [
      {
        path: '',
        component: FirstComponent
      },

      {
        path: ':id',
        component: SecondComponent
      }
    ]
  }
];

每个解析器都会执行一些耗时的操作，例如向服务器发出请求：

@Injectable()
export class FirstResolve implements Resolve<Entity[]>{

  constructor(
    private _firstService: FirstService,
    private _secondService: SecondService,
    private _store: Store<any>
  ) { }

  async resolve(): Promise<Entity[]> {
    let data = await Promise.all([
      this._firstService.getEntities(),
      this._secondService.getEntities()
    ]);

    this._store.dispatch(...);
    this._store.dispatch(...);

    return;
  }

}

你能帮我弄清楚吗？

尝试EventEmitter但没有机会和如此少的文档...任何帮助赞赏

我有一个名为sidebar的组件和另一个名为header的组件,当你单击标题中的一个按钮时,它应该隐藏侧边栏...你如何在angular2中实现这一点？

谢谢

我已经尝试过这个解决方案，但无法使其正常工作。我对 Angular2 完全陌生（不了解 AngularJS）。好吧，加载屏幕没有显示，我想我需要添加一些超时，以便它有一些时间显示，但我不知道在哪里以及如何显示。

应用程序组件.ts

import {Component} from '@angular/core';
    import {
      Router,
      // import as RouterEvent to avoid confusion with the DOM Event
      Event as RouterEvent,
      NavigationStart,
      NavigationEnd,
      NavigationCancel,
      NavigationError
    } from '@angular/router';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./loadingCSS.css']
    })

    export class AppComponent {
    // Sets initial value to true to show loading spinner on first load
      loading = true;

      constructor(private router: Router) {
        router.events.subscribe((event: RouterEvent) => {
         this.navigationInterceptor(event);
      });
    }

      // Shows and hides the loading …