时间戳

首页 > 解决方案 > 在没有绑定的情况下在组件中传递输入值

angular - 在没有绑定的情况下在组件中传递输入值

问题描述

我在 Angular 10 中有一个组件，如下所示：

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

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {

  @Input() totalItems: number = 0;
  constructor() { }

  ngOnInit(): void {}

}

并将其添加到如下页面：

<app-summary [totalItems]="internalTotalItems"></app-summary>

internalTotalItems并且在声明和维护变量时一切正常。我想知道是否可以更新totalItems组件的属性而不将其绑定到主页中的变量？

如果有很多输入都需要在主页中声明，这会变得很痛苦，调用类似[app-summary].totalItems=123或类似的东西会更容易。这甚至可能吗？

标签： angular

解决方案

您可以像这样从父级引用您的组件：

@ViewChild(AppSummaryComponent)
public comp: AppSummaryComponent | undefined;

然后，您可以直接访问public如下属性：

public ngAfterViewInit(): void {
  if(this.comp){
    this.comp.totalItems = 123;
  }
}

不过我不建议这样做，使用可用的输入语法就足够了。

如果您在格式化时遇到问题，您应该考虑使用 html 格式化程序，它可以很好地格式化所有属性。

推荐阅读