Angular 最佳实践在何处放置随状态变化的字符串

Question

让我们假设我有一个 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内容变化？

Answer 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>
```

如果您必须同时将状态发送到多个组件，您可以考虑使用 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

Angular 最佳实践在何处放置随状态变化的字符串

Angular best practise where to place strings changing on state

angular

coding-style

code-cleanup