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

问题描述

我无法使组件以角度删除自身.

I can't make a component delete itself with 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所评论的那样，有很多方法可以解决此问题.一种方法是在WasGreetedComponent中添加一个@Output，该@Output将发射到父组件.

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屋！