将 js 转换成 typescript 成 angular 8答案

【问题标题】：convert js into typescript into angular 8将 js 转换成 typescript 成 angular 8
【发布时间】：2021-06-28 01:34:25
【问题描述】：

以下代码在 javascript 中运行良好。但是当我在 Angular 8 中尝试同样的方法时，我遇到了很多错误

const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
    container.classList.add('right-panel-active');
});

signInButton.addEventListener('click', () => {
    container.classList.remove('right-panel-active');
});
}

错误 signUpButton.addEventListener('click', () => { ~ 错误 TS1003：需要标识符。

    69 signUpButton.addEventListener('click', () => {
                                         ~~~~~~~
    Parameter declaration expected.

    69 signUpButton.addEventListener('click', () => {
                                                ~
    Parameter declaration expected.

    69 signUpButton.addEventListener('click', () => {
                                                  ~
    error TS1005: ';' expected.

    71 });
            ~
    error TS1128: Declaration or statement expected.

请告诉我如何将其转换为 Typescript

【问题讨论】：

请分享您的 tsconfig 文件

标签： javascript angular typescript angular8

【解决方案1】：

在 Angular 中，最好不要使用 eventListener，而是在 HTML 代码中使用事件绑定。

您的 HTML 将类似于：

<input type="button" name="" id="signUp" (click)="signUp()">
<input type="button" name="" id="signIn" (click)="signIn()">

在 TS 文件中：

signUp() {
    const container = document.getElementById('container');
    container.classList.add('right-panel-active');
}

signIn() {
    const container = document.getElementById('container');
    container.classList.remove('right-panel-active');
}

阅读更多 --> https://angular.io/guide/event-binding

【讨论】：

【解决方案2】：

按原样在.ts 文件中尝试此操作，您的代码中有一个额外的花括号，

const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
    container.classList.add('right-panel-active');
});

signInButton.addEventListener('click', () => {
    container.classList.remove('right-panel-active');
});

【讨论】：