要解决Angular 6组件无法获取父级样式的问题,可以使用以下方法:
在组件类中,使用@HostBinding装饰器绑定一个属性,并在绑定时指定需要获取的样式。例如,要获取父级的背景颜色,可以在组件类中添加以下代码:
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent {
@HostBinding('style.background-color') backgroundColor: string;
}
在模板文件中,可以直接使用backgroundColor
属性来获取父级的背景颜色:
Child Component
Parent background color: {{ backgroundColor }}
在父组件中,将需要获取的样式作为属性传递给子组件。在子组件中,使用@Input装饰器接收传递的样式。例如,要传递父级的背景颜色,可以在父组件中添加以下代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
templateUrl: './parent-component.component.html',
styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent {
parentBackgroundColor = 'blue';
}
在子组件中,使用@Input装饰器接收父级的背景颜色:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './child-component.component.html',
styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent {
@Input() backgroundColor: string;
}
在模板文件中,可以直接使用backgroundColor
属性来获取父级的背景颜色:
Child Component
Parent background color: {{ backgroundColor }}
以上两种方法可以解决Angular 6组件无法获取父级样式的问题。