Question

如何在angular 2组件打字稿文件中添加class属性？

下面是我的页脚组件代码，我想在其中添加页脚类。

footer.component.ts

import { Component } from '@angular/core';
import { Footer }    from './footer';
@Component({
  moduleId: module.id,
  selector: 'footer',
  templateUrl: 'footer.component.html'
})
export class FooterComponent {
constructor() {
    this.title = 'Footer Content';
    this.css_class = 'navbar-fixed-bottom';
  }
}

footer.ts

export class Footer {
  constructor(
    public title: string
  ) {  }
}

请建议。

Answer 1

您可以使用Component装饰器的host元数据属性。 https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html

您的组件装饰器应如下所示：

@Component({
  moduleId: module.id,
  selector: 'footer',
  templateUrl: 'footer.component.html',
  host: {'class': 'my-footer'}
})

Answer 2

有几种方法可以将CSS类添加到HTML中。

首先是那个

<div class='{{css_class}}'>...</div>

第二个是你可以根据一些条件/标志添加CSS类，当条件为真时，CSS类将被添加到dom中。

export class FooterComponent {
 let addCssClass : boolean = true;

 constructor() {
    this.title = 'Footer Content';
    this.css_class = 'navbar-fixed-bottom';
  }
}

当 addCssClass 为真时，

在HTML <div [class.navbar-fixed-bottom]="addCssClass">...</div>中 navbar-fixed-bottom 会添加到div中。

Answer 3

首先使变量css_class成为组件的公共属性

然后，在您的模板footer.component.html中，只需插入变量css_class，如下所示：

<div class='{{css_class}}'>test</div>

这只是一个例子，重要的部分是class属性及其值。

Answer 4

您需要将Footer类型指定给组件的变量：

import { Component } from '@angular/core';
import { Footer }    from './footer';
@Component({
  moduleId: module.id,
  selector: 'footer',
  templateUrl: 'footer.component.html'
})
export class FooterComponent {

  public footerClass: Footer;

  constructor() {
    this.footerClass = new Footer('Footer Content');
  }
}

Answer 5

在Angular v7 +上，建议使用HostBinding来实现。

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

export class FooterComponent implements OnInit {

  @HostBinding('class') class = 'my-footer';
  constructor(){};
  ...
}

来自official documentation

如何在angular 2组件打字稿文件中添加class属性？

5 个答案: