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警告你不要在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>

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

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

比

更重要

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

你的CSS现在应该没事了

Angular2子组件打破css关系

1 个答案: