Angular 我怎样才能破坏一个角组件？

我正在制作一个模态，我将它制作成一个组件

在

内部，我有一个关闭按钮。我想在单击该按钮时销毁

大概是这样的：

<button (click)="closeModal()">Close</button>

关闭

我还可以使关闭按钮成为一个组件。如有必要，可以使用类似于

的方法

---

这可能吗？

父级必须销毁其子级。这样您就可以从child发送事件

@Output()
onClose: EventEmitter<boolean> = new EventEmitter();

...
closeModal() {
    this.onClose.emit(true);
}

*ngIf

指令将处理其余部分

---

可能是一两个错误，我在移动设备上…

如果您使用的是

ngx引导

模式对话框，默认情况下，组件会在关闭时销毁

打字稿

openModal() {
this.modalRef = this.modalService.show(SomeComponent,  {
  initialState: {
    title: 'Modal title',
    data: {}
  }
});
}

HTML

模态分量

---

创建一个具有布尔行为主体的ModalControlService

import { Injectable } from '@angular/core';

import {BehaviorSubject} from 'rxjs';

@Injectable()
export class ModalControlService {
  modalOpen$ = new BehaviorSubject<boolean>(false);

  open() {
    this.modalOpen$.next(true);
  }

  close() {
    this.modalOpen$.next(false);
  }
}

在模板中

<modal-component *ngIf="modalOpen$ | async"></modal-component>

---

StackBlitz

还有一个技巧：

import { ViewContainerRef } from '@angular/core';

constructor(private viewContainerRef: ViewContainerRef) {}
...
private selfClose() {
   this.viewContainerRef
    .element
    .nativeElement
    .parentElement
    .removeChild(this.viewContainerRef.element.nativeElement);
}

注:

---

它将使组件被删除/消失，但不会调用ngOnDestroy钩子，直到父组件被销毁，组件才被完全销毁。

这为我做到了。。。该死的ng引导选项卡模式保存了值。

import { Injectable } from '@angular/core';

import {BehaviorSubject} from 'rxjs';

@Injectable()
export class ModalControlService {
  modalOpen$ = new BehaviorSubject<boolean>(false);

  open() {
    this.modalOpen$.next(true);
  }

  close() {
    this.modalOpen$.next(false);
  }
}

import { Component } from '@angular/core';

import { ModalControlService } from './modal-control.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [ ModalControlService ]
})
export class AppComponent  {
  modalOpen$ = this.modalControlService.modalOpen$;

  constructor(private modalControlService: ModalControlService) {}

  openModal() {
    this.modalControlService.open();
  }
}

<modal-component *ngIf="modalOpen$ | async"></modal-component>

import { Component, OnInit } from '@angular/core';

import { ModalControlService } from '../modal-control.service';

@Component({
  selector: 'modal-component',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {

  constructor(private modalControlService: ModalControlService) { }

  closeModal() {
    this.modalControlService.close();
  }
}

import { ViewContainerRef } from '@angular/core';

constructor(private viewContainerRef: ViewContainerRef) {}
...
private selfClose() {
   this.viewContainerRef
    .element
    .nativeElement
    .parentElement
    .removeChild(this.viewContainerRef.element.nativeElement);
}