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 内容更改？

解决方法

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

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