Angular 2如何将一个字符串(CSS类)添加到父组件中？

Question

如何将字符串（css-class）添加到父组件？ 不同的页面应该能够向容器元素添加类。

app.component.ts:

@Component({
  selector: 'app-root',
  template: `
        <div class="container {{ ADD HERE }}">
             <router-outlet></router-outlet>
        </div>
  `
})
export class AppComponent {
  title = 'app works!';
}

---

page1.component.ts:

@Component({
  template: `
      <p>I'm page 1!</p>
  `
})
export class Page1Component {
      containerClasses = "page-1";
}

- Mick

Answer 1

@Component({
  template: `
      <p>I'm page 1!</p>
  `
})
export class APageComponent {
  constructor(private elRef:ElementRef) {
  }

  containerClasses = "page-1";

  ngAfterViewInit() {
    this.elRef.nativeElement.parentElement.classList.add(this.containerClasses);
  }
}

- Günter Zöchbauer

---

我可能还想分享更多信息，比如“显示标题？”从子组件到父组件。此外，该元素必须不是dom中的父级才能使用nativeElement.parentElement访问它。 - Mick

当然，您可以始终使用共享服务进行组件通信 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service - Günter Zöchbauer

这对我来说是一个巨大的帮助。谢谢！ - SuttonY

@SuttonY 很高兴听到这个消息 :) - Günter Zöchbauer