Question

我正在尝试学习Angular。他们说打字稿是javascript的超集，但我无法完成诸如从html获取元素并在.ts文件中对其进行修改的工作。

我正在尝试执行一个简单的document.getElementById，但我不知道如何在打字稿中完成它...

我有一个componentn，在html中，我放置了一个<p>元素，并为其分配了一个id属性。然后从打字稿我试图设置一个innerHTM，但我没有能力。谁能告诉我打字稿是如何实现的？

我尝试了以下代码，但不起作用

import { Component, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';

const myContainer = document.getElementById('test') as HTMLInputElement;
myContainer.value = 'Hello from about';

@Component({
  selector: 'app-about',      
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

Answer 1

之所以不起作用，是因为您已将元素操作代码放在模块级别，这意味着它将在首次需要/导入模块时执行，并且早于实际创建组件并将其添加到组件中时执行。 DOM。

如果将get元素/ innerHTML行移动到ngOnInit函数主体中，则该元素将存在。

但是，这不是在角度应用中要遵循的好模式。相反，您应该使用属性绑定来设置值。

例如，您可以在模板中拥有<p>{{message}}</p>，并且在组件上拥有属性message = "Hello from about"

您可以在此处参考文档：https://angular.io/guide/template-syntax#interpolation-and-template-expressions

如何捕获.ts文件中的html元素？

1 个答案: