Question

我有一个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），我想显示一个不同的组件。哪一个取决于加载的数据。该组件将包含一个表单。此外，我希望每次执行加载时重置表单，例如点击重新加载按钮。

所以我正在寻找告诉角度的电话：现在将组件X放入路由器插座Y.还是有另一种解决方案吗？

Answer 1

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

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

加载...

所以在你的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.
}

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

1 个答案:

加载...