Как контролировать класс css корневого компонента в его дочернем компоненте - Angular 2?

У меня есть 3 компонента в приложении angular 2. class="container-fluid content" - это класс css в app.component.html. Это class="container-fluid content" css по умолчанию для других компонентов. Теперь я хочу установить background-color:blue в компоненте деталей. Попробовал подробно задать компонент.component.ts вот так styles:['.container-fluid content{background-color: blue;}'] Не вышло. Если я установил в app.component.html вот так <div class="container-fluid content" style="background-color: blue;"> Это применимо к обоим компонентам. Как переопределить этот компонент подробностей class = "container-fluid"?

 //my project structure

app
  - app.component.html
  -app.component.ts
- welcome
  -welcome.component.html
  -welcome.component.ts
- detail
  -detail.component.html
  -detail.component.ts

//app.component.html
<div class="container-fluid content">
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
</div>

//welcome.component.html
<h1>welcome page heading</h1>
<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
 padding-top: 25px;  margin: auto;justify-content: center" >  
<md-card>
          <md-card-content>
            <h1></h1>
            <h2></h2>
          <h2>
            </h2>
          </md-card-content>
          </md-card> 
        </div>

//detail.component.html
<h1>Details page heading</h1>
<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
 padding-top: 25px;  margin: auto;justify-content: center" >  
<md-card>
          <md-card-content>
            <h1></h1>
            <h2></h2>
          <h2>
            </h2>
          </md-card-content>
          </md-card> 
        </div>
//detail.component.ts
import { OnInit, Component } from '@angular/core';
import { DetailService } from '../detail/detail.service'; 
import { HostBinding} from '@angular/core';

@Component({

  providers: [DetailService ]
  templateUrl: './detail.component.html',
  styles: ['h3 {margin:5px}'] 

})

export class DetailComponent implements OnInit {

 @HostBinding('class.blueClass') blue: boolean = false;

  constructor( private _detailService: DetailService ) { }

  ngOnInit() {

this.blue = true;
}
}

angular html css angular-components
person user2301    schedule 02.06.2017    source источник
comment
Это может быть хорошо, если вы покажете, как работает detail.component.ts.   -  person tildy    schedule 02.06.2017
comment
@tildy Пожалуйста, найдите образец кода detail.component.ts выше   -  person user2301    schedule 02.06.2017

Ответы (2)


arrow_upward
4
arrow_downward

В дочернем компоненте вы можете добавить этот параметр в @Component.

child-component.component.ts

@Component({ selector: 'child-component', templateUrl: 'child-component.component.html', styleUrls: ['child-component.component.css'] encapsulation: ViewEncapsulation.None })

child-component.component.css

.container-fluid content{background-color: blue;}

Вы можете обратиться к этой стороне для получения дополнительной информации:

https://blog.othingtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

person Thien Hoang    schedule 02.06.2017
comment
Я получаю сообщение об ошибке: не удалось загрузить ресурс child-component.component.css - person user2301; 02.06.2017
comment
Можете ли вы указать подробную ошибку, структуру папок, инструмент для сборки? - person Thien Hoang; 02.06.2017
comment
вы создали для него CSS? В вашей структуре он должен быть здесь: - detail -detail.component.html -detail.component.ts -detail.component.css, и вы должны использовать styleUrls: ['detail.component.css'] - person tildy; 02.06.2017
comment
Да, я сделал то же самое. В консоли браузера Chrome я получаю эту ошибку Failed to load resource: :8100/detail.component.css Failed to load resource: the server responded with a status of 404 (Not Found) Unhandled Promise rejection: Failed to load detail.component.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load detail.component.css undefined consoleError @ zone.js:522 zone.js:524 ZoneAwareError consoleError @ zone.js:524 - person user2301; 02.06.2017
comment
Попробуйте так: styleUrls: ['./child-component.component.css'] - person Thien Hoang; 02.06.2017
comment
Опять не сработало. У меня была эта проблема раньше, и я не мог ее решить stackoverflow.com/questions/43851295/ - person user2301; 02.06.2017
comment
@ThienHoang Привет, я указал абсолютный путь для загрузки таблицы стилей css в styleUrls. Я сделал точно так же, как описано выше в вашем примере кода, за исключением того, что у меня нет селектора в моем компоненте. Но теперь цвет фона применяется к обоим компонентам. Я хочу, чтобы он применялся только к компоненту деталей. - person user2301; 07.06.2017

arrow_upward
0
arrow_downward

Вы пробовали использовать привязку хоста и добавить туда новый класс?

 @HostBinding('class.blueClass') blue: boolean = false;

А во втором компоненте просто включите это onInit?

ngOnInit() {
    this.blue = true;
}

Другой способ может быть в определении компонента, вы можете добавить следующую строку:

  host: {'class': 'blueClass'}

и вместо этого вы выполняете остальную работу css в css.

person tildy    schedule 02.06.2017
comment
куда мне добавить этот @HostBinding ('class.someClass') blue: boolean = false ;. В каком компоненте? - person user2301; 02.06.2017
comment
добавьте в свой файл detail.component.ts. Импортировать декоратор HostBinding из angular / core - person M Thomas; 02.06.2017
comment
В компоненте детали. - person tildy; 02.06.2017
comment
Вы добавили HostBinding в импорт? импортировать {Component, HostBinding} из '@ angular / core'; - person tildy; 14.06.2017