angular - 从另一个组件绑定和编辑对象

Question

我创建了一个查看器组件来显示歌曲表。我想让用户编辑字体设置（和其他显示设置）。为此，我创建了视图自定义组件，它本身使用字体自定义组件。它看起来像这样：

我需要找到一种方法将这些设置传输到将添加所需类的查看器。我已经使用了@Input() 和@Output() 但是在这里我有很多信息要传输，我不想为LyricsBold、LyricsItalic、LyricsColor、ChordsBold、ChordsItalic 创建一个输入...我创建了一个对象ViewSettings 包含所有设置，但我不知道如何将其传输到查看器以及在更新此对象的属性之一时如何更新查看器。

这样做的最佳（正确）方法是什么？

标签： angulartypescriptbinding

Answer 1

您可以创建一个包含所有参数的模型并将其导出为 GlobalModel

export class StyleModel{
    public LyricsBold: number
    public LyricsItalic: string
    public LyricsColor: string
}
export const GlobalStyleModel = new StyleModel()

然后你可以通过导入模型

import { GlobalStyleModel } from 'src/models/style.model'

您也可以添加自己的类型，这样您可以获得更详细的信息而无需翻译。

在您设置样式的现有组件中，您可以调用全局模型并添加值。

GlobalStyleModel.LyricsBold = 700

我能想到的另一个尝试是接收数据的服务，您可以订阅它。但我认为这不切实际。如果您想制作用户友好的应用程序，cookie 是确保数据在重新加载时不会丢失的最佳方式。