将 js 转换成 typescript 成 angular 8

Question

以下代码在 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

Answer 1

按原样在 .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');
});

Answer 2

在 Angular 中，最好不要使用 eventListeners，而是在 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

将 js 转换成 typescript 成 angular 8

convert js into typescript into angular 8

javascript

angular

typescript

angular8