Angular 4-使用渲染器2和Element.querySelector()修改html元素的样式

Angular 4是一种流行的前端开发框架，它基于TypeScript构建，并且具有强大的渲染和组件化能力。在Angular 4中，可以使用渲染器2和Element.querySelector()方法来修改HTML元素的样式。

渲染器2是Angular 4中的一个重要概念，它允许开发者直接与底层DOM进行交互。通过使用渲染器2，可以修改元素的样式、属性和内容等。要使用渲染器2来修改HTML元素的样式，可以按照以下步骤进行操作：

1. 在组件类中引入Renderer2模块：import { Component, Renderer2 } from '@angular/core';
2. 在组件类的构造函数中注入Renderer2：constructor(private renderer: Renderer2) { }
3. 在需要修改样式的方法中，使用Renderer2的相关方法来修改元素的样式。例如，使用Renderer2.setStyle()方法来设置元素的样式：changeStyle() { const element = document.querySelector('#myElement'); this.renderer.setStyle(element, 'color', 'red'); }

在上述代码中，我们首先使用Element.querySelector()方法获取需要修改样式的元素，然后使用Renderer2.setStyle()方法来设置元素的样式。这里将元素的颜色设置为红色。

需要注意的是，使用Renderer2来修改样式时，需要传入元素对象、样式属性和对应的值。可以根据需要修改元素的任何样式属性。