如何获取 Angular 组件的绑定路径字符串？

Posted 2023-02-22

【中文标题】如何获取 Angular 组件的绑定路径字符串？

【英文标题】：How to get the binding path string of an Angular component?

【发布时间】：2019-05-06 23:50:03

【问题描述】：

这里最简单和完整的例子可以在这里找到：https://stackblitz.com/edit/angular-gbenfj

我们想要一个基于绑定路径做 4 件事的简单组件：

在输入中显示值 添加 i18n 当不允许用户查看该字段时安全隐藏 model.us 上的代码完成 => model.user...

我们想要这样的东西：

<app-input [value]="model.user.name"></qcr-input>

在后台执行的操作：

<div class="form-group form-material floating" *permission="requiredAuthority">
  <input type="text" class="form-control" [value]="value" name="value"/>
  <label class="floating-label">label</label>
</div>

*permission 是一个指令，如果登录用户没有该权限，则不会呈现组件。

export class InputComponent implements OnInit 

  @Input()
  public value: string;

  public label: string;

  public requiredReadAuthority: string;

  ngOnInit() 
    let path = // HOW TO GET model.user.name here to be able to do the rest generate requiredAuthority 'model.user.name__READ' AND ge the label for key 'model.user.name'?
    // path should be 'model.user.name' here.
    this.requiredReadAuthority = this.path + '__READ';
    this.label = this.someServiceToGeti18n(this.path);
  

我认为这可以使用指令来完成，但没有太多信息，因为它围绕根据指令中的“model.user.name”角度框架代码获取实际字符串。

任何帮助都会很棒！

【问题讨论】：

您的确切问题是什么？你都尝试了些什么 ？你能提供一个minimal reproducible example 来重复你的问题吗？您是否遇到任何问题？

let path = this.value ?说真的，一点都不清楚，请在stackblitz.com 上提供minimal reproducible example 与您的目标

感谢您的回复。确切的问题是问题的标题：当您拥有实际的绑定路径（在示例中为“model.user.name”）时，您可以执行其他框架操作，例如自动获取标签并根据该值自动添加安全性。我尝试创建一个@Directive 并以某种方式在组件 上获取该值（'model.user.name'），但我找不到任何地方的值，例如 TemplateRef 或 ViewContainerRef。

好吧，在您提供minimal reproducible example（第三次询问...）之前，我将放弃。如果没有，祝你的问题好运！

感谢您的回复和时间trichetriche。我更新了原始问题，以更清楚地说明预期的内容。我不能轻易地创建一个简单的例子，因为这是一个非常大的版权项目。我希望有人能告诉我绑定路径存储在某个 Angular 框架类中的位置，例如指令 TemplateRef 或 ViewContainerRef。喜欢：返回'model.user.name'的angularComponent.getBindingPathAsString()（而不是像John这样的用户的实际名称。我真的想要'model.user.name'，所以我可以用它执行额外的框架内容。

【参考方案1】：

按照您的 cmets，我制作了一个 stackblitz，可以做您想做的事。缺点是您必须知道要使用哪些组件（在示例中为AppComponent 和HelloComponent）才能注入它们。

但是这个开始应该会给你一些工作内容。如果您有任何问题，请随时提出！

【讨论】：

感谢您的宝贵时间。这或多或少是“B 计划”，但是开发人员在 IDE 中失去了代码完成、代码导航和错误检查。如果有一个 Angular Framework 类来获取组件的原始模板值，那就太好了。例如：AngularTemplateUtils.getRawAttrVallue(component : any, attrName: string) 并返回（在上面的示例中）'model.user.name'。