Question

我知道您应该使用（行为）主题来获取可能随时间变化的值。但是大多数时候，当我查看其他项目的源代码时，他们使用原始数据类型来改变值。

所以我的问题是，使用专门用于改变这样的值的优缺点是什么：

@Component({
    selector: 'app-test',
    template: `
        <div> 
            <div *ngIf="isLoading | async">
                <img src="loading.gif"/>
            </div>

            <div *ngIf="errorCode | async">
                An error occurred. Please try again later.
            </div>

            <ng-container *ngIf="data | async; let jobs">
                <div *ngFor="let job of jobs;">
                    {{ job.title }}
                </div>
            </ng-container>
        </div>
    `
})
export class TestComponent implements OnInit {
    errorCode = new BehaviorSubject<number | null>(null);
    isLoading = new BehaviorSubject<boolean>(true);
    data      = new BehaviorSubject<any>(null);

    constructor(
        public service: TestService,
    ) {}

    public ngOnInit() {
        this.isLoading.next(true);
        this.getData();
    }

    public getData() {
        this.service.getData().subscribe((data)=> {
            this.data.next(data);
            this.isLoading.next(false);
        }, (error: HttpErrorResponse) => {
            this.errorCode.next(error.status);
            this.isLoading.next(false);
        });
    }
}

vs使用这样的原始数据类型：

@Component({
    selector: 'app-test',
    template: `
        <div> 
            <div *ngIf="isLoading">
                <img src="loading.gif"/>
            </div>

            <div *ngIf="errorCode">
                An error occurred. Please try again later.
            </div>

            <ng-container *ngIf="data; let jobs">
                <div *ngFor="let job of jobs;">
                    {{ job.title }}
                </div>
            </ng-container>
        </div>
    `
})
export class TestComponent implements OnInit {
    errorCode : number | null = null;
    isLoading : boolean = true;
    data : any = null;

    constructor(
        public service: TestService,
    ) {}

    public ngOnInit() {
        this.isLoading = true;
        this.getData();
    }

    public getData() {
        this.service.getData().subscribe((data)=> {
            this.data = data;
            this.isLoading = false;
        }, (error: HttpErrorResponse) => {
            this.errorCode = error.status;
            this.isLoading = false;
        });
    }
}

很抱歉提出这样一般性的问题，但这个主题给了我一个真正的困难，我找不到任何确凿的答案

Answer 1

async是用于开发人员方便的管道。

常见的最佳做法是创建干组件。这些组件不执行业务逻辑，只是渲染模板。

您可以在模板中使用async将组件保持为 dry 。它基本上是一个在class中无效的组件，所有工作都在模板中完成。

Dry 组件风险低且易于测试。

当您开始混合时，async管道与组件中的业务逻辑的使用开始变得复杂。我并不是说它的错误或错误，但很难找到stuff | async与stuff.next(value)之间的联系。

因此，如果您的组件没有逻辑，并且模板使用async，那么它很容易维护，但如果模板中有async且组件正在执行为观察者创造和发出价值的工作很多，很难维持。

不在模板中使用async的一个好处是，您可以在调试器中点击断点，组件的this表示其当前状态。如果你有async，你就不会知道视图中使用的可观察数据的当前值是什么。

Answer 2

优势：它允许对组件使用OnPush策略。

缺点：由于额外的复杂性，它更复杂，更难理解和测试，并且更容易引入错误。

Answer 3

有几点：

优点：

可观察量是异步的，因此不会阻塞。这意味着，当observable正在等待时，可以处理其他任务。
可能有许多观察者订阅了观察者。一旦数据到达，将通知他们中的任何一个。
毕竟复杂的应用程序会更快。
异步编程已经是最先进的，并将在未来保留。

缺点：

开始时有点复杂。
难以测试，有时甚至可怕。

使用Behaviorsubjects改变价值观的利弊

3 个答案: