时间戳

首页 > 解决方案 > 将两个元素链接在一起，因此更改一个元素的内容会自动更改另一个 Javascript/Angular 的内容

javascript - 将两个元素链接在一起，因此更改一个元素的内容会自动更改另一个 Javascript/Angular 的内容

问题描述

是否可以将两个元素链接在一起，以便使用 jquery 或 angular 更改一个元素的内容会自动更改另一个元素的内容？

我有一个应用程序，我希望在整个应用程序中出现几次的元素标题相同。因此，例如，当我单击一个名为“打开窗口 1”的按钮时，它会打开窗口 1，当我单击另一个也称为“打开窗口 1”的按钮时，它也会打开窗口 1。我想要实现的是如果我改变1个按钮的标题，试图让它实时改变另一个按钮的标题。请记住，我在应用程序上有大约 20 个不同的按钮，每个按钮都有一个应该链接在一起的双胞胎。

基本上，我只想将两个按钮链接在一起，这样它们就像彼此的镜像。这是 Angular JS 的一些特性/功能吗？

标签： javascriptjqueryangular

解决方案

我最后一次使用 Angular 是在不久前，主要是使用 Angularjs 而不是 Angular，所以这只是一个简短的要点，让您了解我的意思，您必须根据自己的需要进行调整

您可以在某处执行类似创建全局模块的操作，例如：

buttons.ts：

interface ButtonInfo {
    title: string,
    onClick: Function
}

const button1: ButtonInfo = {
    title: 'Open Window 1',
    onClick: openWindow1()
};
const updateButton1 = update => {
    if (update.title) button1.title = update.title;
    if (update.onClick) button1.onClick = update.onClick;
};

const button2: ButtonInfo = {
    title: 'Open Window 2',
    onClick: openWindow2()
};
const updateButton2 = update => {
    if (update.title) button2.title = update.title;
    if (update.onClick) button2.onClick = update.onClick;
};

export {
    button1,
    updateButton1,
    button2,
    updateButton2,
    ButtonInfo
};

然后你可以在你的按钮对所在的任何地方导入它：

button1.component.ts：

import { button1, updateButton1 } from './buttons';
import type { ButtonInfo } from './buttons';

export class Button1Component {
   button1: ButtonInfo = button1;

   ...

   updateButton(update) {
       updateButton1(update);
   }
}

button1.component.html：

<div>
    ...
    <button (click)="button1.onClick()">
        {{button1.title}}
    </button>
</div>

推荐阅读