Question

我有一个父组件，它在点击链接时打开一个新组件，这个新组件应该有一个关闭按钮，在关闭时向父母发送一条关闭消息并自行销毁。

我们可以使用ngOnDestroy方法发送结束消息，但是如何调用销毁子组件。

<parent>
    <child></child> //child to be opened on click but close 
                    //event should be inside the child componenet
</parent>

如果我在这里遇到一些概念错误，请纠正我。感谢

Answer 1

如果使用Angular 2 dynamic tabs with user-click chosen components中显示的ViewContainerRef.createComponent()添加组件，则在将cmpRef传递给创建的组件时，组件可能会自行销毁。

否则我不认为有办法。您可以将值传递给父级，以便*ngIf删除组件。

<child *ngIf="showChild" (close)="showChild = false"></child>

class ParentComponent {
  showChild:boolean = true;
}

class ChildComponent {
  @Output() close = new EventEmitter();

  onClose() {
    this.close.emit(null);
  }
}

Answer 2

不确定这种解决方案的清洁度，但我用过：

this.viewContainerRef
    .element
    .nativeElement
    .parentElement
    .removeChild(this.viewContainerRef.element.nativeElement);

Answer 3

这是另一种方法。这是从组件内部进行的。无需与外部组件进行通信。

// imports
export class SelfDestroyableComponent implements OnInit {
    // other code

    constructor(private host: ElementRef<HTMLElement>) {}

    // whatEver function name you want to give 
    onCloseClicked() {
        this.host.nativeElement.remove();
    }

    // other code
}

组件可以调用自毁事件

3 个答案: