使用组件输入参数访问 JSON 对象值

Question

我是 Angular 新手，我无法理解为什么我无法使用组件输入参数作为键来访问 JSON 对象值。

在我的应用组件中，我添加了三个组件：

<app-example input="example1"></app-example>
<app-example input="example2"></app-example>
<app-example input="example3"></app-example>

组件 "app-example" 将配置 JSON 文件导入为配置并具有 @Input() 输入：字符串；

在“app-example”组件中，我尝试使用 config[this.input] 访问 ngOnInit() 中的配置

当我 console.log(config[this.input]) 打印出 undefined
当我 console.log(this.input) 它打印出输入字符串（例如“example1”）
但是，如果我例如 console.log(config["example1"]) 它会打印出相应的对象。

这可能是非常基本的东西，但我就是想不通。

Answer 1

使用 Angular 输入的正确语法是：@Input() input: string（请注意，您的示例中缺少括号）。

下面是一个简单的例子：

app.component.html

<app-foo bar="baz"></app-foo>

bar.component.ts

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

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.scss']
})
export class FooComponent implements OnInit {
  @Input() bar: string;

  constructor() {
    console.log('Shows undefined:', this.bar);
  }

  ngOnInit() {
    console.log('Shows baz:', this.bar);
  }
}

如果你运行它，它会在控制台中显示baz。

您可以阅读有关输入的更多信息：https://angular.io/api/core/Input。