在 Angular 组件成员中展开元组答案

【问题标题】：Expand Tuple in Angular Component Members在 Angular 组件成员中展开元组
【发布时间】：2020-12-13 14:10:46
【问题描述】：

在 React 中有一种创建状态变量的方法，如下所示：

const SomeComponent = ({ someProp }) => {
  const [value, setValue] = useState<boolean>(false);
}

是否可以在 Angular 组件的成员中实现相同的元组分布？

例如：

@Directive({
  selector: '[appDirective]'
})
export class AppDirective {
  [value, observable] = createState<boolean>(false);
}

这里的问题是[value, observable] 不是一个有效的语法。将其替换为 a = createState<boolean>(false) 有效，但我正在寻找一种方法将元组扩展为指令的两个成员变量。注意createState 返回[BehaviorSubject<T>, Observable<T>]。

【问题讨论】：

const [value, observable] = createState(false) ahould work..?

标签： angular typescript tuples

【解决方案1】：

与您尝试编写的内容最接近的选项是

export class AppDirective {
  someState = createState<boolean>(false);
  value = someState[1];
  subject = someState[0];
}

但是您似乎正在使用不受欢迎的库，这只会让您受苦而不是发展。 Angular 提供了一种方便的双向绑定，你应该使用它来代替：

value = 'justValue, Nothing more required';

component.html:

<input type="text" [(ngModel)]="value">

【讨论】：

【解决方案2】：

函数实现不能与类定义进行比较。要为类属性定义解构，您可以在某些函数类中进行如下操作：

function createState<T>(initialState: T): [BehaviorSubject<T>, Observable<T>] {
  const app = new BehaviorSubject<T>(initialState);
  return [app, app.asObservable()];
}

export class AppComponent implements OnInit {
  value!: BehaviorSubject<boolean>;
  observable!: Observable<boolean>;

  ngOnInit(): void {
    [this.value, this.observable] = createState<boolean>(false);
    const [value, observable] = createState(false);
  }
}

【讨论】：