Angular里ngClass的一个使用例子

简介: ngClass定义的位置:

image.png

export declare class NgClass implements DoCheck {
    private _iterableDiffers;
    private _keyValueDiffers;
    private _ngEl;
    private _renderer;
    private _iterableDiffer;
    private _keyValueDiffer;
    private _initialClasses;
    private _rawClass;
    constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2);
    set klass(value: string);
    set ngClass(value: string | string[] | Set<string> | {
        [klass: string]: any;
    });
@Component({
  selector: "app-root",
  template: `
    <div [ngClass]="
                header? 'country-header'
                  : 'country-header-link'">
      Hello
    </div>
  `
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    setTimeout(() => {
      this.jerry = "changed!";
    }, 0);
  }
  jerry = "Jerry Hello";
  header = true;
}

最后在函数_applyIterableChanges里,给div标签添加class:

image.png

image.png


相关文章
|
自然语言处理 JavaScript 前端开发
angular-devkit 中 build-angular 包的作用
angular-devkit 中 build-angular 包的作用
|
存储 API 网络架构
Angular 14 新的 inject 函数介绍
Angular 14 提供了一些非常有趣的特性:类型化表单(typed forms)、独立组件(standalone components),以及本文将要介绍的内容,即在所谓的构造器阶段(constructor phase) 使用 inject 函数的能力。
angular37-angular实现todolist基本结构
angular37-angular实现todolist基本结构
133 0
angular37-angular实现todolist基本结构
angular39-angular实现todolist2删除
angular39-angular实现todolist2删除
99 0
angular39-angular实现todolist2删除
|
JavaScript 前端开发 vr&ar
Angular 1和Angular 2的区别
Angular 1和Angular 2的区别
185 0
|
监控 前端开发 JavaScript
Angular | 浅谈Angular错误处理方式
错误处理是编写代码经常遇见的并且必须处理的需求,很多时候处理异常的逻辑是为了避免程序的崩溃,之前《浅谈前端异常监控平台实现方案》介绍过异常跟踪,本文将简单介绍Angular处理异常的方式。
496 0
Angular NgTemplateOutlet的一个例子
Angular NgTemplateOutlet的一个例子
117 0
Angular NgTemplateOutlet的一个例子
Angular rxjs fromEvent使用的一个例子
Angular rxjs fromEvent使用的一个例子
146 0
Angular rxjs fromEvent使用的一个例子
Angular 的 ngIf 和 NgIf 有何区别
Angular 的 ngIf 和 NgIf 有何区别
197 0
Angular 的 ngIf 和 NgIf 有何区别
|
资源调度 API
如何创建 Angular 库并在 Angular 应用里调用
如何创建 Angular 库并在 Angular 应用里调用
211 0
如何创建 Angular 库并在 Angular 应用里调用