Angular2 - 如何与其他 css 文件共享 css 文件数据

Question

我有app.component.html文件，该文件具有html标头，以及我放置路由器html模板更改的位置。Html 标头在另外 2 个组件之间共享 - home.component.ts 和 product-list.component.ts。我想做的是当用户转到/product-list 页面时，以某种方式能够通过 product-list.component.css 文件更改 app.component.css 数据。

因此，当用户转到/product-list 页面时，在许多页面之间共享的 html 标头需要添加下边框。谁能帮忙？

app.component.html

<div class="header">
    <a href="" class="header-container clearfix">
        <div class="logo"></div>
            <p class="header-tekst">          
                TITLE
            </p> 
        <div class="logo2"></div>
    </a>
</div>
<router-outlet></router-outlet>

product-list.component.ts

@Component({
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { Router } from '@angular/router';
import { AppComponent } from './app.component';
import { routingComponents } from './app-routing.module';
@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.css

nav a.active{
    color:red;
    background:blue;
}
nav a{
    padding:10px;
    background:grey;    
    text-decoration:none;
    color:white;
}
nav li{
    display:inline-block;
    color:white;
}
  .header{
    background-color:#ffffff;
    text-align:center;
    padding:15px;
  }

  .header-container a{
    text-decoration:none;
  }
  .header-tekst{
    float:left;
    font-weight: bold;
    font-size: 20px;
    font-family: Verdana;
    color:#0356a0;
  }

产品列表组件.css

#wrapper{
  position:absolute;
  width: 100%;
  height: 100%;
  padding-top: 46px;
  font-family: Verdana, sans-serif;
  padding-top:46px;
  background-color: white;
}
   .header{
        border-bottom:2px solid grey;
   }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { ProductListComponent } from './product-list.component';

const routes: Routes = [
        { path: '', component: HomeComponent },
        //{path: '', redirectTo: '/kodu', pathMatch:'full'},
        {path: 'home', component: HomeComponent},
        {path: 'product-list', component: ProductListComponent}
];
@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule{}
export const routingComponents = [HomeComponent, ProductListComponent]

Answer 1

如果我理解了您想更改 app.component 中的标题 css 的问题.html当用户转到不同的页面时。所以你可以在app.component.ts中做到这一点

import { Router, NavigationStart, ViewChild } from "@angular/router";
export class AppComponent {
  @ViewChild("myHeader") myHeader;
  constructor(public router: Router) {
    router.events.forEach((event) => {
      if(event instanceof NavigationStart) {
        if (event.url === "/product-list") {
          // fill the styles whatever you like
          this.myHeader._elementRef.nativeElement.style.borderBottom = "";
          this.myHeader._elementRef.nativeElement.style.borderBottomColor = "";
          this.myHeader._elementRef.nativeElement.style.borderBottomLeftRadius = "";
          this.myHeader._elementRef.nativeElement.style.borderBottomRightRadius = "";
          this.myHeader._elementRef.nativeElement.style.borderBottomStyle = "";
          this.myHeader._elementRef.nativeElement.style.borderBottomWidth = "";
        }
      }
      // NavigationEnd
      // NavigationCancel
      // NavigationError
      // RoutesRecognized
    });
  }
}

您应该像这样将 #ID 添加到标题中;

<div class="header" #myHeader>
    <a href="" class="header-container clearfix">
        <div class="logo"></div>
            <p class="header-tekst">          
                TITLE
            </p> 
        <div class="logo2"></div>
    </a>
</div>
<router-outlet></router-outlet>

你也可以在找到你的标题后使用 jquery

$(this.myHeader._elementRef.nativeElement).css({border-bottom: ""});

编辑：另一种解决方案，您也可以在标题html中使用ngClass

。

<div class="header" [ngClass]="{'routed-page-css': router.url === '/product-list'}">
    <a href="" class="header-container clearfix">
        <div class="logo"></div>
            <p class="header-tekst">          
                TITLE
            </p> 
        <div class="logo2"></div>
    </a>
</div>
<router-outlet></router-outlet>

，然后添加 CSS

.routed-page-css {
  border-bottom: "whatever you want"
}

编辑：导入路由器并将其注入构建器

从"@angular/路由器"导入 { 路由器 };constructor (public router： Router( {}

Answer 2

您应该在 product-list.component.ts 中将视图封装设置为 none。点击此链接：https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation