离子3：自定义角度组件未按预期工作。错误？

Question

基本上存在一个包装问题，其中自定义组件的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 {}

1. 为什么看起来test和内部div元素是test的兄弟姐妹并且不像父母一样？

2. 在background-color:red上更改test（在Chrome检查模式下）在视觉上没有任何效果，这意味着所有子颜色都保持不变。

未突出显示完整的test元素。内部div元素很好。 test组件显示411 x 68但看起来像0x0。计算样式将维度显示为auto x auto。我的应用中的每个组件都表现得像这样。组件不会覆盖他们的孩子，看起来像他们的兄弟。

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

Answer 1

在:host { display:block; background:red; }

中添加test.scss

这是因为浏览器无法将<test>识别为块元素。除此之外，它按预期工作，如果你仔细看看dom树，你会看到div在测试中。

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