时间戳

首页 > 解决方案 > 将子组件注入父组件会扭曲样式

angular - 将子组件注入父组件会扭曲样式

问题描述

我以前问过这个问题，其他人也问过，但是为了我的一生，我仍然无法解决。这是一个 stackblitz 供您查看：https ://stackblitz.com/edit/angular-dpcbxm

这很有描述性。老实说，我已经阅读了很多关于视图封装以及它如何影响注入的子组件的内容，但是这 3 个设置并没有改变任何东西（我也不想一开始就搞砸它）。我尝试通过选择器执行此操作：'[hello]' 然后......但它没有任何改变。

我注意到插入了很多样式，例如 ng_content-c4、c6 ......虽然我不知道为什么子组件的值会与其他组件不同，但我确实知道它们是内部的。

在角度封装页面中，我确实看到了有关样式化此类组件 [_ng_content-c6] 等，但它们在给定时间应用于子组件的不同元素，我不知道要设置什么样式，也不知道要为它们定义什么样式因为我需要的风格是为他们定义的。

有人可以看看并帮我解决它吗？

标签： angular

解决方案

通过禁用样式封装，我能够将父组件上定义的样式应用于子组件。

父母：

import {ViewEncapsulation} from '@angular/core';

并且

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

我在您分享的 Blitz 上遇到了一些错误，但至少样式是有效的。 https://stackblitz.com/edit/angular-4grbtd

推荐阅读