左侧上下文面板中，选择MainWindow，在源文下选择”btn1”，在下方面板中，汉语 译文输入框中输入“按钮1”，然后点击上面绿色的勾号按钮，变为勾号，确认这一行已经翻译，最后点击保存退出。添加翻译与未添加翻译的按钮控件 在ts 文件对比如下：

在左侧的设计视图中，您需要定位到名为"MainWindow"的主要窗口。找到这个窗口后，向下滚动至源代码区域，在这里会看到"btn1"按钮的声明。接着，将您的鼠标移到该按钮对应的行号下方，通常在右侧的属性检查器或代码编辑区的旁边，你会看到一个空白的翻译区域。

在这个区域，找到"汉语 译文输入框"，这是用于输入英文翻译的地方。在这里输入"按钮1"作为按钮的中文翻译。确保输入无误后，点击上方显示为文本的绿色勾号图标，将其切换成勾选状态，表示这行代码已经被翻译。

完成翻译后，记得保存更改。通常，您可以点击文件菜单或者项目面板上的“保存”按钮，或者使用快捷键进行保存。如果在ts文件（TypeScript或Angular的模板文件）中，确保保存操作后，新的翻译会随着项目的更新而生效。

接下来，为了添加翻译和未翻译的按钮控件的视觉指示，您可能需要创建自定义的样式或者绑定状态到按钮上，比如使用ngClass指令来根据不同状态改变按钮的图标或者背景色。例如：

// ts文件中
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isTranslated = false; // 假设这是一个标识按钮是否已翻译的变量

  toggleTranslationState() {
    this.isTranslated = !this.isTranslated;
  }
}

// app.component.html
<button [ngClass]="{'translated': isTranslated, 'untranslated': !isTranslated}" (click)="toggleTranslationState()">按钮1</button>

在HTML模板里，我们使用了`ngClass`来根据`isTranslated`的值来动态应用翻译或未翻译的类名。当按钮被点击时，`toggleTranslationState`函数会被调用，更新`isTranslated`的状态。