Question

我正在使用要创建的组件中的角度组件。我无法修改正在使用的组件（DogstarComponent）。它的输入值“ Alive”可以设置为true或false。但是，我的html中有多个DogstarComponents，只想修改我单击的那一个的“活动”输入值。最好的方法是什么？请参见下面的示例伪代码。

DogstarComponent.ts

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

@Component({
    selector: 'dogstar-selector',
    template: `
        <another-Component  class="test" [alive]="alive" header="{{title}}">
            <ng-content></ng-content>
        </another-Component>
    `
 })

export class DogstarComponent {

    //Title
    @Input() title: string;

    //alive
    @Input() alive: boolean = false;

}

dogstar-selector用于完全不同的组件（太空飞船）HTML

spaceship.component.html

<dogstar-selector (click)="changeAliveValue();" [alive]="true" [title]="test"">

    <p> information </p>

</dogstar-selector>

spaceship.component.ts

@Component({
  selector: 'spaceship',
  templateUrl: './spaceship.component.html',
  styleUrls: ['./spaceship.component.css']
})

@Injectable()
export class SpaceshipComponent implements OnInit {

.......


changeAliveValue()
{

    //How do I change the input value of [alive]?


}

Answer 1

据我所知，更好的方法是使用服务进行数据共享，并从这些组件中使用该服务。以下示例示例实际上并非来自您的输入

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

@Injectable()
export class StorageService {

 public entity: Array < any > | boolean = false;

 constructor() {}

 public getData(): Array < any > | boolean {
  return this.entity;
 }

 public setData(entity: any): void {
  this.entity = entity;
 }
}

从以下链接中了解更多信息。 https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Answer 2

如果* ngFor下有组件，则应按以下步骤

spaceship.component.html

<dogstar-selector *ngFor="let index of list" (click)="changeAliveValue(index);" [alive]="selectedindex===index" [title]="test"">
</dogstar-selector>

spaceship.component.ts

selectedindex:number = -1;
changeAliveValue(index)
{
   this.selectedindex = index;
}

Answer 3

如果您尝试仅更改一个Dogstar组件的活动值，则只需在该组件中执行。

dogstar.component.ts

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

@Component({
    selector: 'dogstar-selector',
    template: `
        <another-Component  class="test" [alive]="alive" header="{{title}}">
            <ng-content></ng-content>
        </another-Component>
    `
 })

export class DogstarComponent {

    //Title
    @Input() title: string;

    //alive
    @Input() alive: boolean = false;

    changeAliveValue()
    {
        this.alive = !this.alive
    }

}

然后在您的dogstar.component.html

中

包括：(click)="changeAlivevalue()"作为被单击的HTML元素的属性。

Answer 4

您可以使用ViewChildren来保留alive变量。如何使用ngFor（如Pranay显示）显示组件，或者只是单独插入标签...这里只是单独插入标签：

<dogstar-selector (click)="changeAliveValue(0);" [alive]="true"> ...
<dogstar-selector (click)="changeAliveValue(1);" [alive]="true"> ...
<dogstar-selector (click)="changeAliveValue(2);" [alive]="true"> ...

我们传递“索引”以了解要更改的组件变量。

在您的父组件中，导入ViewChildren和QueryList并标记：

@ViewChildren(DogstarComponent) comps: QueryList<DogstarComponent>;

changeAliveValue(index) {
  // here we target the component chosen and toggle alive value
  this.comps.toArray()[index]['alive'] = false;
}

这是一个 StackBlitz

如何动态修改角度分量输入值

4 个答案: