在angular9中动态设置style

在Angular 9中，动态地设置样式通常涉及到组件内部的数据绑定和`ngStyle`指令的使用。如果你想要根据某个条件或变量改变元素的样式，你可以这样做：

1. **数据驱动**：首先，你需要在组件的属性或变量中存储需要应用的样式对象。例如：

export class MyComponent {
  myStyle = { color: 'red', fontSize: '16px' };

  // 如果你想根据某个条件动态更改样式
  setDynamicStyle(condition: boolean) {
    this.myStyle.color = condition ? 'blue' : 'red';
  }
}

2. **HTML模板**中，使用`[ngStyle]`指令将这个变量绑定到元素的`style`属性上：

<div [ngStyle]="myStyle">
  这段文本的样式会根据myStyle对象的变化而变化
</div>

<button (click)="setDynamicStyle(!condition)">切换颜色</button>

在这个例子中，点击按钮会触发`setDynamicStyle`函数，从而动态改变`myStyle`的颜色。

相关问题

在angular9中动态设置style 容器高度

在Angular 9中，动态地设置元素的样式，特别是高度，通常通过组件内的 TypeScript 代码来完成。你可以使用 `@ViewChild` 和 `ElementRef` 来获取并操作DOM元素，然后设置其 `style.height` 属性。

下面是一个基本示例：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <div #yourContainer class="container" style="width: 100%;"></div>
  `
})
export class YourComponent {
  @ViewChild('yourContainer', { static: false }) containerElement: ElementRef;

  someFunction() {
    // 获取容器的高度
    let currentHeight = this.containerElement.nativeElement.offsetHeight;
    
    // 然后可以根据需要动态更改高度，例如增加10px
    let newHeight = currentHeight + 10;
    this.containerElement.nativeElement.style.height = `${newHeight}px`;
  }
}

在这个例子中，当你调用 `someFunction()` 函数时，会根据当前容器的高度动态改变其高度。

Angular中使用 innerHTML 指令时自动移除style属性的解决办法

在Angular中，使用innerHTML指令时，确实会自动移除style属性，这是因为Angular认为这样可以避免可能的XSS攻击。如果你需要在Angular中使用innerHTML指令并保留style属性，可以使用以下两种方法中的任何一种：

1. 使用DomSanitizer

可以使用Angular提供的DomSanitizer服务来手动信任HTML字符串。首先，在组件的构造函数中注入DomSanitizer服务，然后在template中使用管道来信任HTML字符串，例如：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <div [innerHTML]="trustedHtml"></div>
  `
})
export class AppComponent {
  trustedHtml: any;

  constructor(private sanitizer: DomSanitizer) {
    const html = '<div style="color: red;">Hello, World!</div>';
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

在这个例子中，我们首先注入了DomSanitizer服务，然后在构造函数中使用该服务的bypassSecurityTrustHtml方法来信任HTML字符串。最后，在template中使用innerHTML指令和trustedHtml变量来渲染HTML。

2. 使用HostBinding

可以使用@HostBinding装饰器来绑定元素的innerHTML属性，并在组件中手动设置该属性，例如：

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [innerHTML]="html"></div>
  `
})
export class AppComponent {
  @HostBinding('innerHTML') html: any;

  constructor() {
    const html = '<div style="color: red;">Hello, World!</div>';
    this.html = html;
  }
}

在这个例子中，我们使用@HostBinding装饰器来绑定元素的innerHTML属性，并在构造函数中手动设置该属性。这样，Angular就不会自动移除style属性了。

需要注意的是，使用innerHTML指令时需要非常谨慎，因为它可能会导致XSS攻击。因此，除非你确实需要使用innerHTML指令，否则最好避免使用它。