我正在努力寻找一种方法来做到这一点。在父组件中,模板描述 table
及其 thead
元素,但将 tbody
的呈现委托给另一个组件,如下所示:
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody *ngFor="let entry of getEntries()">
<my-result [entry]="entry"></my-result>
</tbody>
</table>
每个 myResult 组件都会呈现自己的 tr
标记,基本上是这样的:
<tr>
<td>{{ entry.name }}</td>
<td>{{ entry.time }}</td>
</tr>
我没有将它直接放在父组件中(避免需要 myResult 组件)的原因是 myResult 组件实际上比这里显示的更复杂,所以我想将它的行为放在单独的组件和文件中。
生成的 DOM 看起来很糟糕。我相信这是因为它无效,因为 tbody
只能包含 tr
元素 (see MDN),但我生成的(简化的)DOM 是:
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<my-result>
<tr>
<td>Bob</td>
<td>128</td>
</tr>
</my-result>
</tbody>
<tbody>
<my-result>
<tr>
<td>Lisa</td>
<td>333</td>
</tr>
</my-result>
</tbody>
</table>
有什么方法可以渲染相同的东西,但没有包装 <my-result>
标记,同时仍然使用组件来单独负责渲染表格行?
我看过 ng-content
、DynamicComponentLoader
、ViewContainerRef
,但据我所知,它们似乎没有提供解决方案。
您可以使用属性选择器
@Component({
selector: '[myTd]'
...
})
然后像这样使用它
<td myTd></td>
您需要“ViewContainerRef”并在 my-result 组件中执行以下操作:
html:
<ng-template #template>
<tr>
<td>Lisa</td>
<td>333</td>
</tr>
</ng-template>
ts:
@ViewChild('template') template;
constructor(
private viewContainerRef: ViewContainerRef
) { }
ngOnInit() {
this.viewContainerRef.createEmbeddedView(this.template);
}
@ViewChild('template', {static: true}) template;
my-result
需要能够创建新的 my-result
同级。因此,假设您有一个 my-result
层次结构,其中每一行都可以有“子”行。在这种情况下,使用属性选择器将不起作用,因为第一个选择器进入 tbody
,但第二个选择器不能进入内部 tbody
或 tr
。
您可以尝试使用新的 CSS display: contents
这是我的工具栏scss:
:host {
display: contents;
}
:host-context(.is-mobile) .toolbar {
position: fixed;
/* Make sure the toolbar will stay on top of the content as it scrolls past. */
z-index: 2;
}
h1.app-name {
margin-left: 8px;
}
和html:
<mat-toolbar color="primary" class="toolbar">
<button mat-icon-button (click)="toggle.emit()">
<mat-icon>menu</mat-icon>
</button>
<img src="/assets/icons/favicon.png">
<h1 class="app-name">@robertking Dashboard</h1>
</mat-toolbar>
并在使用中:
<navigation-toolbar (toggle)="snav.toggle()"></navigation-toolbar>
属性选择器是解决这个问题的最好方法。
所以在你的情况下:
<table>
<thead>
<tr>
<th>Name</th>
<th>Time</th>
</tr>
</thead>
<tbody my-results>
</tbody>
</table>
我的结果 ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-results, [my-results]',
templateUrl: './my-results.component.html',
styleUrls: ['./my-results.component.css']
})
export class MyResultsComponent implements OnInit {
entries: Array<any> = [
{ name: 'Entry One', time: '10:00'},
{ name: 'Entry Two', time: '10:05 '},
{ name: 'Entry Three', time: '10:10'},
];
constructor() { }
ngOnInit() {
}
}
我的结果 html
<tr my-result [entry]="entry" *ngFor="let entry of entries"><tr>
我的结果 ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: '[my-result]',
templateUrl: './my-result.component.html',
styleUrls: ['./my-result.component.css']
})
export class MyResultComponent implements OnInit {
@Input() entry: any;
constructor() { }
ngOnInit() {
}
}
我的结果 html
<td>{{ entry.name }}</td>
<td>{{ entry.time }}</td>
查看工作中的 stackblitz:https://stackblitz.com/edit/angular-xbbegx
在你的元素上使用这个指令
@Directive({
selector: '[remove-wrapper]'
})
export class RemoveWrapperDirective {
constructor(private el: ElementRef) {
const parentElement = el.nativeElement.parentElement;
const element = el.nativeElement;
parentElement.removeChild(element);
parentElement.parentNode.insertBefore(element, parentElement.nextSibling);
parentElement.parentNode.removeChild(parentElement);
}
}
示例用法:
<div class="card" remove-wrapper>
This is my card component
</div>
在父 html 中,您照常调用 card 元素,例如:
<div class="cards-container">
<card></card>
</div>
输出将是:
<div class="cards-container">
<div class="card" remove-wrapper>
This is my card component
</div>
</div>
现在的另一个选项是 @angular-contrib/common
package 提供的 ContribNgHostModule
。
导入模块后,您可以将 host: { ngNoHost: '' }
添加到您的 @Component
装饰器中,并且不会呈现任何包装元素。
@Shlomi Aharoni 答案的改进。使用 Renderer2 操作 DOM 以使 Angular 保持在循环中通常是一种很好的做法,因为其他原因包括安全性(例如 XSS 攻击)和服务器端呈现。
指令示例
import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[remove-wrapper]'
})
export class RemoveWrapperDirective implements AfterViewInit {
constructor(private elRef: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit(): void {
// access the DOM. get the element to unwrap
const el = this.elRef.nativeElement;
const parent = this.renderer.parentNode(this.elRef.nativeElement);
// move all children out of the element
while (el.firstChild) { // this line doesn't work with server-rendering
this.renderer.appendChild(parent, el.firstChild);
}
// remove the empty element from parent
this.renderer.removeChild(parent, el);
}
}
组件示例
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.scss'],
})
export class PageComponent implements AfterViewInit {
constructor(
private renderer: Renderer2,
private elRef: ElementRef) {
}
ngAfterViewInit(): void {
// access the DOM. get the element to unwrap
const el = this.elRef.nativeElement; // app-page
const parent = this.renderer.parentNode(this.elRef.nativeElement); // parent
// move children to parent (everything is moved including comments which angular depends on)
while (el.firstChild){ // this line doesn't work with server-rendering
this.renderer.appendChild(parent, el.firstChild);
}
// remove empty element from parent - true to signal that this removed element is a host element
this.renderer.removeChild(parent, el, true);
}
}
这对我有用,它可以避免 ExpressionChangedAfterItHasBeenCheckedError 错误。
子组件:
@Component({
selector: 'child-component'
templateUrl: './child.template.html'
})
export class ChildComponent implements OnInit {
@ViewChild('childTemplate', {static: true}) childTemplate: TemplateRef<any>;
constructor(
private view: ViewContainerRef
) {}
ngOnInit(): void {
this.view.createEmbeddedView(this.currentUserTemplate);
}
}
父组件:
<child-component></child-component>
setAttribute
不是我的代码。但我已经想通了,我需要在我的模板中使用实际的顶级标签而不是ng-container
作为我的组件的标签,所以新的工作用法是<ul smMenu class="nav navbar-nav" [submenus]="root?.Submenus" [title]="root?.Title"></ul>
<ul class="nav navbar-nav"> <li-navigation [navItems]="menuItems"></li-navigation> </ul>
我使用了这个(在将 li-navigation 更改为属性选择器之后)<ul class="nav navbar-nav" li-navigation [navItems]="menuItems"></ul>
my-results
的my-results
,那么您需要ViewContainerRef
(选中 @Slim's answer below)。该解决方案在这种情况下不起作用的原因是第一个属性选择器位于tbody
中,但内部选择器在哪里?它不能在tr
中,也不能将tbody
放在另一个tbody
中。