时间戳

首页 > 解决方案 > Angular 最佳实践在哪里放置更改状态的字符串

angular - Angular 最佳实践在哪里放置更改状态的字符串

问题描述

假设我有一个 Angular 组件，它进行 API 调用并对响应做出适当的反应。该组件包含四种状态：

根据其状态，组件将当前状态显示为 html 中前端的字符串。

那么有一个改变显示文本的变量（myStateText）会更好......

enum State {
    INIT, PULLING, SUCCESS, ERROR
}

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {

    public myState: State;
    public myStateText: string;

    ngOnInit(): void {
        this.myState = State.INIT;
        this.myStateText = 'I am ready';
    }

    public startProcess(): void {
        this.myState = State.PULLING;
        this.myStateText = 'Please wait';

        apiCall.subscribe(response => {
            this.myState = State.SUCCESS;
            this.myStateText = 'Hurray';
        }, error => {
            this.myState = State.ERROR;
            this.myStateText = 'Not hurray';
        });
    }
}

...或者我应该切换 html 中的状态：

<ng-container [ngSwitch]="myState">
    <h2 *ngSwitchCase="state.INIT">I am ready</h2>
    <h2 *ngSwitchCase="state.PULLING">Please wait</h2>
    <h2 *ngSwitchCase="state.SUCCESS">Hurray</h2>
    <h2 *ngSwitchCase="state.ERROR">Not hurray</h2>
</ng-container>

是否有明确的决定，或者取决于我有多少个州或每个州有多少 html 内容更改？

标签： angularcoding-stylecode-cleanup

解决方案

这完全取决于您希望如何更好地管理代码，从而使重构和组织更容易。

  1. 在上述场景中，您可以将状态保留为键值对的导出常量并保存在中央配置中。将常量导入到您想要的任何组件中，例如组件 A 和 B。这样，您可以在需要时轻松更改消息字符串，而无需触摸任何组件 ts 和 html 文件。

    export const myState = {
 INIT: "I am ready",
 PULLING: "Please wait",
 SUCCESS: "Hurray",
 ERROR: "Not hurray",
 COMPLETE: "Im done",
 CLEAR: ""
};

this.myStateText = myState.SUCCESS;

<h2>{{myStateText}}</h2>

  2. 如果您必须同时将您的状态发送到多个组件，您可以考虑使用 BehaviorSubject。

    // Component A
public subject = new BehaviorSubject(myState.INIT);
public myStateText: string;

ngOnInit(): void {
 this.subject.subscribe(newState => (this.myStateText = newState));
}

//You can change the values as below.
this.subject.next(myState.PULLING);

{{myStateText}} // OUTPUT:- 'I am ready' & then 'Please wait'

在组件 B 中，您还可以执行 'this.subject.subscribe' 来获取新值。

Stackblitz - https://stackblitz.com/edit/behaviorsubject-example-eue4v5?file=app/app.component.ts

更多关于行为主题 - https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

推荐阅读