[英]Angular 11 print component inside another component
我有一個簡單的組件,我在其中放置了多個按鈕,我想在另一個組件中顯示這些按鈕(按鈕的功能也來自我的按鈕組件),但我在終端中收到此錯誤
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.
首先,在list.component.html
放置如下所示的 html
<app-buttons></app-buttons>
然后你想調用ButtonsComponent
方法,將它用作依賴,你必須先將它保存在 providers 數組中。
providers: [
...,
ButtonsComponent,
...
]
但是當我查看您更新的問題時,您不必將組件注入構造函數中,而可以使用ViewChild
。
@ViewChild('buttons', { static: false, read: ViewContainerRef })
buttons: ButtonsComponent;
列表.component.html
<app-buttons #buttons></app-buttons>
在 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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.