角2親に文字列（css-class）を追加するコンポーネント

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"; 
} 

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); 
    } 
}