如何让组件在单击按钮时以角度删除自身 [英] How to let a component delete itself on a button click with in angular

问题描述

我无法使用 Angular 使组件自行删除.

I can't make a component delete itself with angular.

我目前正在学习 Angular，并开始了一个小型问候项目.应用程序应该如何工作:

I am currently learning angular and started a small greeting project for the start. How the App should work:

1. 输入您的姓名
2. 创建问候您的子组件.
3. 子组件包含删除自身的按钮

目前我完成了前两个步骤，一切正常.但我不知道如何让子组件自行删除.来自 React 我知道，有可能以某种方式使用生命周期方法删除组件".角度有类似的东西吗?目前我找不到它，但我找到了在组件被销毁之前调用的方法OnDestroy()".但是我该如何正确地销毁它呢?

Currently i fulfilled the first two steps and everything works fine. But i have no idea how i can make the child component delete itself. Coming from React i know, that there was the possibility to delete a "component" with the lifecycle methods somehow. Is there something similiar in angular? At the moment i can't find it, but i found the method "OnDestroy()" that is called, before a component is destroyed. But how do i destroy it properly?

家长:

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

@Component({
  selector: 'app-greeter-service',
  templateUrl: './greeter-service.component.html'
})
export class GreeterServiceComponent implements OnInit {
  title = '';
  currentUser = '';
  isVisible = false;

  currentUsers: any[] = [];

  @ViewChild('newUser') inputField;

  constructor() {}

  greetingFunc(newUser : string) {
      if(newUser) {
      this.currentUsers.push(newUser);
      console.log(this.currentUsers);
      this.inputField.nativeElement.value='';
    }
  }

  ngOnInit() {
      this.title = 'Welcome to the Greeter!';
  }

}

孩子:

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

@Component({
  selector: 'app-was-greeted',
  templateUrl: './was-greeted.component.html',
  styleUrls: ['./was-greeted.component.scss']
})

export class WasGreetedComponent implements OnInit {
  @Input() user: string;

  constructor() { }

  deleteMe() {
    console.log("here should be the action");
  }

  ngOnInit() {
  }
}

我如何动态地"将组件添加到应用程序:

How i add a component to the app "dynamically":

<div class="column" *ngFor="let user of currentUsers">
    <app-was-greeted [user]="user"></app-was-greeted>
</div>

因此，对于数组currentUsers"中的每一次推送"，都会创建一个组件.

So for every "push" in the array "currentUsers" a component is created.

推荐答案

正如@cgTag 所评论的，有很多方法可以解决这个问题.一种方法是将 @Output 添加到您的 WasGreetedComponent 中，它将发射到父组件.

As @cgTag commented there are many ways to handle this. One way is to add an @Output to your WasGreetedComponent which will emit to the parent component.

然后在您的 GreeterServiceComponent 中，您可以在数组中找到元素并将其删除(请记住，您的数组应该是不可变的，因此您要创建数组的新实例)，这将导致ngFor 重新评估和更新视图

Then in you GreeterServiceComponent you can find the element in the array and remove it (remember that your array should be immutable so you want to create a new instance of the array), this will cause the ngFor to reevaluate and update the view

@Component({
  selector: 'app-was-greeted',
  templateUrl: './was-greeted.component.html',
  styleUrls: ['./was-greeted.component.scss']
})

export class WasGreetedComponent implements OnInit {
  @Input() user: string;

  @Output() delete: EventEmitter<string> = new EventEmitter();

  constructor() { }

  deleteMe() {
    console.log("here should be the action");
    this.delete.emit(user);
  }
}

然后您的父组件模板将订阅此发射器

Your parent component template would then subscribe to this emitter

<div class="column" *ngFor="let user of currentUsers">
    <app-was-greeted [user]="user" (delete)="deleteUser($event)"></app-was-greeted>
</div>

组件将需要处理 deleteUser 回调并将用户从数组中移除

And the component will need to handle the deleteUser callback and remove the user from the array

@Component({
  selector: 'app-greeter-service',
  templateUrl: './greeter-service.component.html'
})
export class GreeterServiceComponent implements OnInit {
  title = '';
  currentUser = '';
  isVisible = false;

  currentUsers: any[] = [];

  @ViewChild('newUser') inputField;

  constructor() {}

  ...

  deleteUser(user: string) {
    this.currentUsers = this.currentUsers.filter(x => x !== user);
  }

}

就像我说的，这只是给猫剥皮的众多方法之一.希望这会有所帮助.

Like I said this is just one of many ways to skin a cat. Hope this helps.

这篇关于如何让组件在单击按钮时以角度删除自身的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！