从 HTML 角度 5 中删除自定义组件的名称

Question

我在 HTML 表上使用自定义组件时遇到问题，看起来它妨碍了标签

我的应用组件 HTML：

<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<app-item-form *ngFor="let item of checklists?.items" [child]="item"></app-item-form>
</tbody>
</table>

应用程序项目窗体.html ：

<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<app-item-form *ngFor="let item of checklists?.items" [child]="item"></app-item-form>
</tbody>
</table>

app-item-form.ts ：

@Component({
selector: 'app-item-form',
templateUrl: './item-form.component.html',
styleUrls: ['./item-form.component.scss']
})
export class ItemFormComponent implements OnInit {
@Input()
child: ItemChecklistModel;

Answer 1

您可以为自定义组件指定属性selector，例如[someSelector]。可以将此选择器放在元素上以保留原始标记。此模式在您的情况下也很有用，在制作可访问组件(如输入(需要指定数十个@Input()(例如角度材料输入(的情况下也是如此。

在基础级别，它看起来像这样：

元件：

import { Component, Input } from '@angular/core';
@Component({
selector: '[appItemForm]',
template: `<tbody>your markup</tbody>`,
styles: [`h1 { font-family: Lato; color: red; }`]
})
export class ItemFormComponent  {
@Input() name: string;
}

模板：

<table appItemForm></table>

对于嵌套结构，您可以使用属性选择器组件选择器和ng-container的组合来避免添加无效的标记标记。像这样：

<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<ng-container *ngFor="let item of checklists?.items">
<table [appItemForm] [child]="child"></table>
</ng-container>
</tbody>
</table>

下面是一个实际示例。

希望对您有所帮助！

Answer 2

我用引导类解决了它

我的应用组件 HTML：

<div class="tbl-content" >
<div app-item-form *ngFor="let item of checklists?.items" [child]="item"></div>
/div>

应用程序项目窗体.html ：

<div class="row" >
<div class="col">{{child.label}}</div>
<div class="col" *ngFor="let att of child?.attrValues"></div>
</div>
<div app-item-form *ngFor="let c of child?.childrens" [child]="c"></div>

app-item-form.ts ：

@Component({
selector: '[app-item-form]',
templateUrl: './item-form.component.html',
styleUrls: ['./item-form.component.scss']
})