要阻止在页面中多次使用单个可重用组件,可以使用Angular的服务提供商来创建一个共享的实例。这样,无论在页面中使用多少次组件,都将重用同一个实例。
以下是一个示例解决方案:
import { Injectable } from '@angular/core';
import { BlockUI } from 'ng-block-ui';
@Injectable({
providedIn: 'root'
})
export class BlockUIService {
blockUI: BlockUI; // 声明一个BlockUI实例
constructor() { }
}
import { Component, OnInit, Input } from '@angular/core';
import { BlockUIService } from 'path-to/block-ui.service';
@Component({
selector: 'app-reusable-component',
templateUrl: './reusable-component.component.html',
styleUrls: ['./reusable-component.component.css']
})
export class ReusableComponentComponent implements OnInit {
@Input() text: string;
constructor(private blockUIService: BlockUIService) { }
ngOnInit() {
}
showBlockUI() {
this.blockUIService.blockUI.start(); // 显示BlockUI
}
hideBlockUI() {
this.blockUIService.blockUI.stop(); // 隐藏BlockUI
}
}
import { Component } from '@angular/core';
import { BlockUIService } from 'path-to/block-ui.service';
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.css'],
providers: [BlockUIService] // 添加服务提供商
})
export class PageComponent {
constructor() { }
}
通过这种方法,无论在页面中使用多少次可重用组件,都将重用同一个BlockUI实例,从而阻止创建多个实例。
上一篇:Angular 8(最新更新)不支持在UC浏览器中使用。
下一篇:Angular 8,agm api,警告在./node_modules/@agm/core/fesm5/agm-core.js 4538:34-52。