Angular 11打印另一个组件内部的组件

Question

我有一个简单的组件，在那里我放置了多个按钮，我想在另一个组件中显示这些按钮(按钮的功能也来自我的按钮组件(，但我在终端中遇到了这个错误

ERROR NullInjectorError: R3InjectorError(HelpdeskModule)[ButtonsComponent -> ButtonsComponent -> ButtonsComponent -> ButtonsComponent]: 
NullInjectorError: No provider for ButtonsComponent!

代码

buttons.component.html

<div class="mb-3">
<nz-button-group>
<button nz-button nzType="primary" (click)="buttonClick('create button')" class="ant-btn ant-btn-primary ant-btn-lg"><i nz-icon nzType="download"></i>Create New</button>
</nz-button-group>
</div>

list.component.ts(这是我想展示这些组件的地方(

import { ButtonsComponent } from 'src/app/components/app/layout/buttons/buttons.component';
constructor(
private buttons: ButtonsComponent,
) { }

和list.component.html

// I am uncertain about this part to be correct at all!
{{buttons}}

知道吗

更新

我已经将Injectable添加到我的按钮组件中，如下所示：(只是四处玩耍以打印它们(

import { Component, OnInit, Injectable } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd'

@Component({
selector: 'app-buttons',
templateUrl: './buttons.component.html',
styleUrls: ['./buttons.component.scss']
})
@Injectable({
providedIn: 'root'
})
export class ButtonsComponent implements OnInit {
//
}

现在我得到这个错误

ERROR TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

Answer 1

首先，在list.component.html中，只需像下面一样放置html

<app-buttons></app-buttons>

然后要调用ButtonsComponent的方法，将其用作依赖项，必须首先将其保留在providers数组中。

providers: [
...,
ButtonsComponent,
...
]

---

但当我浏览您更新的问题时，您不必在构造函数中注入组件，而是可以使用ViewChild。

@ViewChild('buttons', { static: false, read: ViewContainerRef })
buttons: ButtonsComponent;

list.component.html

<app-buttons #buttons></app-buttons>

Stacklitz演示

Answer 2

使用Angular中的ComponentFactoryResolver处理多个组件的动态加载器：

这是示例代码：

import {
Component,
ComponentFactory,
ComponentRef,
ComponentFactoryResolver,
ViewContainerRef,
ViewChild
} from '@angular/core'
import { AComponent } from './a.component';
import { BComponent } from './b.component';
@Component({
selector: 'modal-resolver',
template: `
<template #modalContainer></template>
`,
})
export class ModalResolver {
@ViewChild("modalContainer", { read: ViewContainerRef }) container;
@Input() name;
componentRef: ComponentRef;
listComponent: {
'modalA': AComponent,
'modalB': BComponent
}
constructor(private resolver: ComponentFactoryResolver) { }
ngOnInit() {
this.loadComponent(this.name);
}
loadComponent(type) {
this.container.clear();
const factory: ComponentFactory = this.resolver.resolveComponentFactory(this.listComponent[this.name]);
this.componentRef = this.container.createComponent(factory);
this.componentRef.instance.type = type;
this.componentRef.instance.output.subscribe(event => console.log(event));
}
ngOnDestroy() {
this.componentRef.destroy();
}
}

然后你使用它：

<modal-resolver name="modalA"></modal-resolver>

Answer 3

printComponent(elementId: any, scape: any = 'landscape') {
const originalContents = document.body.innerHTML;
const printContents = document.getElementById(elementId).innerHTML;
const css = '@page { size: ' + scape + '; }';
const head = document.head || document.getElementsByTagName('head')[0];
const style: any = document.createElement('style');
style.type = 'text/css';
style.media = 'print';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
window.location.reload();
}

<div>
<h3>Page d'impression des états</h3>
<button
nbButton size="tiny" outline status="warning" class="align-middle"
(click)="printComponent('componentId')"
>
<nb-icon icon="print-outline"></nb-icon>
IMPRIMER
</button>
<div id="usersId">
<table class="table" id="componentId">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let i of [].constructor(100)">
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>