Ionic 3：自定义角度组件未按预期工作。漏洞？答案

【问题标题】：Ionic 3: Custom angular component not working as expected. Bug?Ionic 3：自定义角度组件未按预期工作。漏洞？
【发布时间】：2018-03-18 20:36:07
【问题描述】：

基本上有一个包装问题，其中自定义组件的 dom 元素不覆盖它们的子元素。

有一个single 页面使用了测试组件。

single.html

<test></test>

single.ts

import { Component } from '@angular/core';
import { IonicPage,} from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-single',
  templateUrl: 'single.html',
})
export class SinglePage {}

single.scss

page-single {}

现在这个test 组件

test.html

<div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
</div>

test.ts

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

@Component({
  selector: 'test',
  templateUrl: 'test.html'
})
export class TestComponent {}

test.scss

test {}

为什么看起来test 和内部div 元素是test 的兄弟元素，而不像父子元素？
在 test 上更改 background-color:red（在 chrome 检查模式下）在视觉上没有任何作用，这意味着所有子 div 颜色保持不变。

完整的test 元素未突出显示。 div 里面的元素很好。 test 组件显示 411 x 68 但看起来像是 0x0。计算样式显示尺寸为auto x auto。我的应用程序中的每个组件的行为都是这样的。组件不覆盖他们的孩子，看起来像他们的兄弟姐妹。

Ionic 示例会议应用程序中也存在此行为。在 Angular 示例中，应用程序组件按预期工作。

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

在test.scss中添加:host { display:block; background:red; }

这是因为浏览器无法将<test> 识别为块元素。除此之外，它按预期工作，如果您更仔细地查看 dom 树，您会发现 div 在测试内部。

:host 是一个伪元素，它引用组件元素本身 - test {} 什么都不做，除非里面有另一个测试，比如 <test><test></test></test>，然后它会影响子元素。

【讨论】：