如何在Angular组件模板中访问DOM元素？

你好！我是Angular和TypeScript的新手，在组件内访问DOM元素时遇到了问题。 我有一个简单的组件，显示一个按钮和一个段落。我想在点击按钮时更改段落中的文本并为其添加CSS类。在普通JavaScript中，我会使用`document.getElementById('myParagraph')`，但在Angular中这似乎无法正常工作。 以下是我当前的代码： ```typescript // my-component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-my', template: `

初始文本

更改文本 `, styleUrls: ['./my-component.css'] }) export class MyComponent { changeText() { // 尝试通过ID获取元素 const paragraph = document.getElementById('myParagraph'); if (paragraph) { paragraph.innerText = '新文本'; paragraph.classList.add('highlight'); } } } ``` 问题在于，