javascript - 了解 Angular 2 中的可观察对象

Question

我是 Angular 2 和可观察对象的新手。

我有一个带有文本框的 HTML 模板。当可观察对象不返回任何数据时它会被清除，但当数据存在时它会被第一个数据项填充。

即使我已经阅读了有关可观察对象的教程，我也不知道这是怎么发生的。

HTML

<form class="clearfix" role="form"
      [ngFormModel]="basicDetailsForm">
    <div class="form-group col-md-6 no-padding">
        <label for="assignedTo" class="text-muted">Assigned To</label>
        <input class="form-control bold"
               id="assignedTo" 
               type="text" 
               [ngFormControl]="ctrlAssignedTo"
               (change)="assignedToChanged($event)"
               [(ngModel)]="activeItem.assignee.name" />
    </div>
</form>

我的组件 .ts 文件有

.component.ts

 public ngOnInit(): void {

            // subscribe to users observable
            this.usersSubs = this.usersSubs || this.itemDetailService.users$.subscribe(function (user: any) {
                if (user.usedFor !== 'basic') {
                    return;
                }

                if (user.id === '0') {
                    context.activeItem.assignee = {};
                    return;
                }

                let assignedTo: any = {
                    id: user.id,
                    type: 'user',
                    url: user.url,
                    name: user.name,
                    archived: false,
                    archiveDate: null
                }

                context.activeItem.assignee = assignedTo;
            });
        }
 constructor(
        @Inject(AppStateService) public appStateService: AppStateService,
        @Inject(ItemDetailService) public itemDetailService: ItemDetailService,
        private formBuilder: FormBuilder) {
        super(appStateService, itemDetailService);


        this.activeItem = this.activeItem || {
            assignee: {}
        };

        // build the form
        this.basicDetailsForm = this.formBuilder.group({
            'assignedTo': ['']
        });
        this.ctrlAssignedTo = <Control>this.basicDetailsForm.controls['assignedTo'];

    }

我的 service.ts 文件有

.service.ts

 private usersObserver: Observer<any>;

constructor(
    @Inject(ProjectsApiService) private apiService: ProjectsApiService,
    @Inject(AppStateService) private appStateService: AppStateService,
    @Inject(AppObservableService) private appObservableService: AppObservableService) {
    this.activeDetailTab = {
        index: 0
    }
}

public init() {
 this.users$ = this.users$ || new Observable((observer: any) => {
            this.usersObserver = observer;
        }).share();
}

     public getUserByAlias(alias: string, usedFor: string): void {

            let context = this;
            this.apiService.getUserByAlias(alias)
                .subscribe(
                (data: any) => {
                    if (data.data.length === 0) {
                        context.usersObserver.next({ id: '0', usedFor: usedFor });
                        return;
                    }

                    data.data.forEach(function (user: any) {
                        context.users.push(user);
                    });

                    data.data[0].usedFor = usedFor;
                    context.usersObserver.next(data.data[0]);
                },
                err => { console.log(err); },
                () => { console.log('Done'); }
                );
        }

Answer 1

我会试着按照数据流向你解释。因此，让我们从触发流程的因素开始。

您有一个 Input，它会在发生变化时触发 assignedToChanged 事件。

(change)="assignedToChanged($event)"

在 assignedToChanged() 中调用了服务类中的 getUserByAlias() 方法。

您已在上次编辑中删除了这部分代码。

getUserByAlias class apiService.getUserByAlias() 而这里是 observables 介入的地方。

首先让我们了解 getUserByAlias 的作用。如果您了解有关可观察对象的基础知识，您就会知道 .subscribe 在返回 api 响应时被调用。 在 .subscribe 中，您将处理另一个可观察对象，我们很快就会到达那里。但现在我将重点介绍这里发生的三件主要事情。

如果 api 响应中没有数据，id 为 0 的对象将被推送到 userObservable 流中。

if (data.data.length === 0) {
    context.usersObserver.next({ id: '0', usedFor: usedFor });
    return;
}

否则，用户数组将填充所有返回的用户。

data.data.forEach(function (user: any) {
   context.users.push(user);
});

第一个用户被推送到userObserver

data.data[0].usedFor = usedFor;
context.usersObserver.next(data.data[0]);

现在，请注意上面代码片段中的 userObserver。这个观察者是通知文本框的关键。当我们调用 .next() 时，我们将一个新值推送到可观察流中，因此，所有正在收听此可观察数据的人都会收到通知。

但是谁订阅了这个 observable？ 在组件内部，您订阅了 userObservable:

this.usersSubs = this.usersSubs || this.itemDetailService.users$.subscribe(function (user: any) {
  //implementation removed for readbility
});

每当将新值插入可观察流(userObservable.next())时，始终会调用 .subscribe() 中的函数

关键是要理解该服务正在公开一个观察者，任何类都可以监听该观察者，并且每当必须发送新值时，该服务将调用 .next('here goes the value|object' ).