Question

我有两个简单的组件。一个用于列出用户，另一个用于详细视图。

当我选择特定用户时，此用户绑定到一个变量selectedUser，ngIf in detailed component得到满足，我想提出额外的请求来获取与该用户相关的更多数据。

实施此方法的适当方法是什么？当我制作自定义ngIf函数时，它开始向我的api发出大量请求，但我只需要它一次。谢谢！

这是我的代码：

@Component({
    selector: 'users',
    template: `
        <div *ngFor="#user of users"
            (click)="onSelect(user)">
                {{ user.name }}
        </div>
        <user-detail [user]="selectedUser"></user-detail>
    `
export class UserComponent {
    onSelect(user: IUser) {
        this.selectedUser = user;
    }
}

@Component({
    selector: 'user-detail',
    template: `
        <div *ngIf="user">
            {{ user.name }} {{ user.id }}
            <div *ngFor="task of tasks"> <-- this is what i actually try to fetch
            </div>
        </div>
`

export class UserDetailComponent {
    @Input() user: IUser[];
}

Answer 1

我建议您使用ngIf指令而不是user-detail组件使用情况。然后你可以ngDoCheck＆amp;当ng user-detail值user发生变化时，Input组件内部会<user-detail *ngIf="selectedUser" [user]="selectedUser"></user-detail>挂钩以触发愿望代码。

@Component({
    selector: 'user-detail',
    template: `
        <div>
            {{ user.name }} {{ user.id }}
            <div *ngFor="task of tasks"> <-- this is what i actually try to fetch
            </div>
        </div>
`

export class UserDetailComponent implements DoCheck {
    @Input() user: IUser[];

    ngDoCheck(){
       //stuff which will fireup when everytime component user gets changed.
    }
}

<强>组件

Average

Answer 2

您可以使用带范围功能的ng-if。只要您返回true或false，就可以在那里进行验证并提取额外的数据。

一些事情（在javascript中）：

var busy = false;
scope.Validate = function() {
       //Do validation
       if(/*condition*/) {
         if(!busy) {
             busy = true;
             /*Do your fetch for data and set busy = false when done*/
         }
         return true;
       }
       else return false; 
}

然后在元素调用ng-if="Validate()"

中

满足ngIf条件时获取其他数据

2 个答案: