如何从每个子组件中设置父组件中的元素类？

在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

如何从每个子组件中设置父组件中的元素类？

回答

相关问题