Angular2子组件破坏CSS关系

Question

我正在创建另一个组件 (ParentComponent2)，它需要与 ParentComponent1 所需的完全相同的 html，因此我创建了一个子组件并将其扩展到我需要的位置：

我的父组件

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
import { MyChildComponent } from "./my-child.component"

@Component({
    selector: "my-parent",
    templateUrl: "/js/app/templates/my_parent.html"
})
export class ParentComponent1 {
    categories: CategoryList[];
    this.categories = this.metadataService.categories;
}

我的父母模板

<ul materialize="collapsible" class="collapsible" data-collapsible="collapsible" [materializeParams]="params">
    <li>
        <div class="collapsible-header">
            My Products
        </div>
        <div class="collapsible-body">
            <div class="card horizontal hoverable lighten-4 my-product" *ngFor="let product of products">                         
                <my-single-product [categories]="categories"></my-single-product>
            </div>
        </div>
    </li>
</ul>

我的孩子组件

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
@Component({
    selector: "my-single-product",
    templateUrl: "/js/app/templates/my-single-product.html"
})

export class MyChildComponent {
    @Input() categories: CategoryList[];

}

我的孩子模板

<div class="card-image white">
   <div></div>
</div>

它可以工作，但是 css 完全混乱，并且现在与我在子组件中扩展 html 之前完全不同。原因是该元素正在最终的 html 中呈现

<my-single-product

该元素的渲染破坏了 css 子关系。

有没有办法阻止该元素显示并只显示其 html 内容？

Answer 1

<my-single-product></my-single-product>如果您不想要元素并且想要替代，请尝试一下<div my-single-product></div>。

但是 Angular 2 在他们的风格指南中警告你不要这样做

在你父母看来

<ul materialize="collapsible" class="collapsible" data-collapsible="collapsible" [materializeParams]="params">
    <li>
        <div class="collapsible-header">
            My Products
        </div>
        <div class="collapsible-body">
            <div class="card horizontal hoverable lighten-4 my-product" *ngFor="let product of products">                         
                <div my-single-product [categories]="categories"></div>
            </div>
        </div>
    </li>
</ul>

然后在你孩子的组件中

import { Component, Input } from '@angular/core'
import { CategoryList } from "./metadata.service.dtos"
@Component({
    selector: "[my-single-product]",
    templateUrl: "/js/app/templates/my-single-product.html"
})

export class MyChildComponent {
    @Input() categories: CategoryList[];

}

这将创建一个div具有 my-single-product 属性的元素，而不是创建一个 html 元素<my-single-product>

所以当你在 chrome 中检查时你会看到

<div my-single-product></div>

而不是

<my-single-product></my-single-product>

现在你的 css 应该没问题了