Angular2：如何设置组件在ajax加载数据后显示？答案

【问题标题】：Angular2: how to set component to show after ajax loading of data?Angular2：如何设置组件在ajax加载数据后显示？
【发布时间】：2017-01-19 16:36:21
【问题描述】：

我有一个 div，我想在其中显示一些内容：

<div>
    <router-outlet></router-outlet>
</div>

路由在这里定义：

const appRoutes: Routes = [
    {path: 'details', component: DetailsComponent},
];

输入 URL 后会立即显示详细信息组件
details.component.html：

<p>loading...</p>

details.component.ts:

ngOnInit() {
    this.sub = this.route
        .params
        .subscribe(params => {
            this.load(params['id']);
        });
}

加载完成后（this.load），我想展示一个不同的组件。哪一个取决于加载的数据。该组件将包含一个表单。此外，我想在每次执行加载时重置表单，例如通过单击重新加载按钮。

所以我正在寻找一个告诉 Angular 的电话：现在将组件 X 放入路由器插座 Y。还是有其他解决方案？

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用 Observable 和 ngIf 的组合来实现此目的，如果您可以订阅 Observable 并具有根据获取数据的结果显示或不显示视图子部分的功能。

假设您的组件最初在没有数据存在时显示 Loading... 屏幕。

加载中...

所以在你的 html 中你可以拥有：

<span *ngIf="busy">
  <h3>Loading...</h3>
</span>

<div *ngIf="!busy">
  <a *ngFor="let user of (users$ | async)">
      <img src="{{user.img}}" alt="{{user.name}}">
  </a>
</div>

在你的组件中：

   @Component({
      moduleId: module.id,
      selector: 'sd-user',
      templateUrl: 'user.component.html',
      styleUrls: ['user.component.css']
    })
    export class UserComponent {
      public users$: Observable<User>;
      private busy:boolean;

      constructor(private store: Store<IAppState>, public routerext: RouterExtensions) {
        this.busy = true;
        // returns observable
        this.users$ = store.let(getUsers);    

        this.users$.subscribe(
          (x) => { // next
            console.log('Next ' + x);
            this.busy = false;
          },
          (err) => { // error
          console.log('Error: ' + err);
            this.busy = false;        
          },
          () => { // completed
            console.log('Completed');
            this.busy = false;
          }      
        );        
      }
  // ... whenever you dispatch a new action that will trigger a server 
// side call you should set this.busy to true and reset your form if needed.
}

【讨论】：