Question

我有一个Angular 2手风琴标题组件，其折叠状态存储在根元素的class属性中。

该组件包括V形符号。我想根据根div的折叠状态在两个不同的V形图标之间切换。

我试图找到一种懒惰的方式来在我的HTML中全局使用我的root的class属性值。访问子跨度中的值而不将其绑定到组件中会很棒。打字稿代码。

这可能吗？这是我的代码：

<div [attr.class]="'panel-heading panel-heading-accordion'" data-toggle="collapse" [attr.data-parent]="parentId" [attr.data-target]="targetId"
(click)=changeCollapsedState()>
    <h4 class="panel-title">
        <span class="glyphicon glyphicon-chevron-{{attr.class === 'panel-heading panel-heading-accordion collapse' ? 'right' : 'down'}}"></span>
        <span class="space-span">&nbsp;</span>{{headingText}}
    </h4>
</div>

Answer 1

您可以使用模板变量。看到这个plunker：https://plnkr.co/edit/gW8eOY9VTgyT7d5NZOmG?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2
        class="many classes here"
        #myHeader
        [class.any]="addAnyClass"
        (click)="addAnyClass = !addAnyClass"
        >Hello {{name}}</h2>
      {{myHeader.classList.contains('any') ? 'CONTAINS ANY' : 'NO NO NO ..'}}
    </div>
  `,
})
export class App {

  private addAnyClass = false;

  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

使用Angular 2从子元素访问HTML属性值

1 个答案: