Question

假设我想实现一个灯箱组件，它使用<dialog>来呈现其内容。类似的东西：

@Component({
  selector: 'image-popup',
  template: `
  <dialog>
  ...
  </dialog>
`
})
export class ImagePopupComponent {
...
  show(): void {
    this.element.nativeElement.showModal();
  }
}

如果我在主应用程序组件中创建了此实例，如何从其他组件启用其访问权限。例如，在某些后代组件中，我有一个按钮，我希望click在此对话框实例上触发show（）。在我的用例中，该组件将具有imageUrl属性，并且将多次使用相同的组件来显示不同的图像。

Answer 1

您可以使用服务。

@Injectable()
export class MyModalService {
    component: MyModal;
}

@Component({
    selector: 'my-modal',
})
export class MyModal {
    constructor(private element: ElementRef, modalService: MyModalService) {
        modalService.component = this;
    }

    show(): void {
        this.element.nativeElement.showModal();
    }
}

然后在其他一些组件中：

@Component({
    selector: 'another',
})
export class AnotherComponent {
    constructor(private _modalService: MyModalService) {
    }

    buttonClicked() {
        this._modalService.show();
    }
}

如何在angular2中注入组件实例

1 个答案: