Angular2子组件break css关系 [英] Angular2 sub component break css relationship

问题描述

我创建了另一个组件（ParentComponent2），需要与ParentComponent1需要的相同的精确html，所以我创建了一个子组件，并将其扩展到我需要的地方：

I am creating another component (ParentComponent2) that will need the same exact html that ParentComponent1 needs, so I created a child component and will extended it to where I need:

my parent component

my parent component

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中呈现

It works, but the css is all messed up and completely different now than it was before I extended the html inside the child. The reason is that this element is being rendered in final html

<my-single-product

此元素的呈现打破了css子关系。

The rendering of this element breaks the css child relationship.

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

Is there a way to stop this element from being shown and only show its html content?

推荐答案

如果您不想要< my-single-product>< / my-single-product> 元素并且希望改为< div my-single-product>< / div> 。

Give this a shot, if you don't want <my-single-product></my-single-product> elements and would like <div my-single-product></div> instead.

警告您不要在其 STYLE GUIDE

BUT Angular 2 warns you not to do this in their STYLE GUIDE

<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 RATHER创建一个html元素< my-single-product>

This will create a div with a property my-single-product RATHER than creating a html element <my-single-product>

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

So when you inspect in chrome you will see

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

RATHER

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

现在你的css应该很好了

And your css should be fine now

这篇关于Angular2子组件break css关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！