如何從每個子組件中設置父組件中的元素類？

在app.component（應用程序的主要原因之一），我有：如何從每個子組件中設置父組件中的元素類？

<div id="wrapper"> 
<!-- Header 
================================================== --> 
    <header class="transparent sticky-header full-width"> 
. 
. 
. 
    <div class='container-fluid'> 
     <div class='row'> 
      <div class='col-sm-3'> 
       <nav-menu></nav-menu> 
      </div> 
      <div class='col-sm-9 body-content'> 
       <flash-messages></flash-messages> 
       <ng2-toasty></ng2-toasty> 
       <router-outlet></router-outlet> 
      </div> 
     </div> 
    </div> 
. 
. 
.

我想標題，以保持「透明」類只在home.component。在所有其他組件上，我想保留其他兩個類，而不是「透明」。

應該更好說明組件結構可以在下面的圖片中可以看出一個層次：

所以，家庭成分是不是父母，但app.component是父。 home.component和其他人一樣是一個孩子。

app.component.ts

import { Component, ErrorHandler } from '@angular/core'; 
import { ToastyService } from "ng2-toasty"; 
import { AppErrorHandler } from "../../app.error-handler"; 
import { HomeComponent } from "../home/home.component"; 
import { ActivatedRoute, Router } from "@angular/router"; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [ 
     HomeComponent, 
     ToastyService, 
     { provide: ErrorHandler, useClass: AppErrorHandler } 
    ] 
}) 
export class AppComponent { 
    classes: string; 
    constructor(private home: HomeComponent, private route: ActivatedRoute, 
     private router: Router) { 
     //this.classes = false; 
     //if (this.router.url ==='/home') 
     //{ 
     // this.classes = true; 
     //} 
     this.classes = "transparent sticky- header full- width"; 
    } 
}

我試圖做一個變量類，並與ngClass通過它，但它不工作。

我已經搜索瞭解決方案，我發現的所有解決方案均基於事件。

來源

2017-08-09 M. Niculescu

多一點信息會有幫助。你的其他組件是這個家庭組件的子組件（通過它們的選擇器嵌入到家庭組件中）還是子路由（家庭組件包含兒童的路由器插座）還是組件根本不相關？ – DeborahK

所有組件都具有app.component的標頭。如果我在home.component上，而不是在其他組件上，我希望這個頭文件具有「透明」類。家庭組件與其他組件無關。 –

我會立即更新以提供更多信息 –

解決此問題的一種方法是在此圖中添加另一個名爲Main Component的組件。

頂部圖像聽起來像你現在所擁有的。底部圖像是一種替代方法。

你可以代替從app.component刪除頭和其他任何你不想在每頁面，只有在router-link。

然後，您可以添加一個Main Component，其中包含您希望在其他任何頁面上的所有內容。然後它將包含一個router-outlet，它將託管需要標題的應用程序的每個其他頁面。

ALTERNATIVELY

你可以試試使用ngClass。這使您可以根據值指定CSS類。下面是我的一個示例：

<span [ngClass]="{'glyphicon glyphicon-exclamation-sign': !isValid('tags')}">

這將打開定義的樣式類，如果isValid(...)方法返回false。

然後，您需要定義一些要綁定的屬性，並確保在適當時設置該屬性。你可以用服務來做到這一點。

來源

2017-08-09 18:36:36 DeborahK

使用全局css文件而不是每個組件css可能會解決您的問題。您可以使用ViewEncapsulation來自定義此行爲。

來源

2017-08-09 21:01:27 sancelot

如何從每個子組件中設置父組件中的元素類？

回答

相關問題