Angular2サブコンポーネントブレークCSSの関係

Question

私はParentComponent1が必要とまったく同じHTMLが必要になります別のコンポーネント（ParentComponent2）を作成していますので、私は、子コンポーネントを作成し、私は必要な場所にそれを拡張します：

私の親コンポーネントを

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>が必要な場合は、このショットを付けてください。

しかし角度2あなたの両親に自分の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を作成します警告しhtml要素を作成するよりもmy-single-product RATHERのプロパティ<my-single-product>

あなたはクロームで検査するときだから、

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

ではなく

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

が表示され、あなたのCSSは、まさにめちゃめちゃ何今