直接绑定到Angular中的property属性


direct binding to a property of property in Angular

我有一个这样的模型：

1
2
3
export class Person{
name: string;
}

在我的组件中使用的方式如下：

1
2
3
4
5
export class TestComponent {
  @Input() person : Person;
  constructor() {
  }
}

我想从html设置人名，如下所示：

1
 

当我这样做时，angular会生气："无法绑定到'person.name'，因为它不是'app-test'的已知属性。"

好吧，他以某种方式正确，person是我组件的财产，而不是person.name

另一方面，在以下示例中没有任何错误：

1
<span [style.color]="'red'">This span is red.</span>

我违反规则了吗？

还是样式属性在内部不同？怎么样？

谢谢

您不能绑定到person.name，因为Input()装饰器绑定到子组件(测试)中的person，而不是任何特定的属性，如person.name

您必须发送一个对象来解决此问题。

请参阅此示例。

这是因为您尝试传递给测试组件的Input属性是" person.name"，这在测试组件上未定义。您的测试组件需要一个名为" person"的东西。其次，您传递的是字符串，而不是您在测试组件上定义的Person类型。更改Test组件以接受字符串或传递Person并在Test组件中引用name属性。并确保名称匹配。

这里有两种方法可以考虑将人的名字传递给其他部分

</app-test>

然后在测试组件中：

1
2
3
4
 export class TestComponent  {
  @Input() name: string;
  @Input() person : Person;
}

请注意名称和类型如何匹配？我的建议是不要超过您的需要。如果只需要传递人名，则让您的组件接受一个字符串。无需传递整个对象。

TestComponent模板：

1
2
Person: {{person.name}}
Name: {{name}}

我将添加一个到Angular文档的链接，因为我认为它是Angular中非常重要的部分，您可能需要查看。他们拥有的英雄教程非常好。

https://angular.io/api/core/Input

相关讨论

您是正确的[ngStyle]和[style]不同，您需要

1
 

其他选项是

1
 

在您的main.app

中

1
this.person.name='Jack'

请记住，如果在输入中使用对象，则父对象或子对象中对象属性的任何更改都将更改对象的"属性"

这是因为style是带有多个选择器和输入的指令。

您可以通过执行一些指令来实现此目的。我想你可以做类似的事情：
(未测试)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Directive, ViewContainerRef, ChangeDetectorRef, OnInit } from '@angular/core';

const selector = `
  [name],
  [name.foo],
  [name.bar]
`;

export const inputs = [
  'name',
  'name.foo',
  'name.bar'
];



@Directive({
  selector,
  inputs
})
export class HelloDirective implements OnInit {
  constructor(
    private viewContainerRef: ViewContainerRef
  ) {
  }

  ngOnInit(): void {
    const getSetKeys = Object.keys(this).filter(item => inputs.indexOf(item) > -1);
    const getValues = getSetKeys.map(item => this[item]);
    const component = this.viewContainerRef['_view'].component;
    getSetKeys.forEach((item, index) => {
      const splitKey = item.split('.');
      component[splitKey[0]][splitKey[1]] = getValues[index];
    })
  }
}

在这种情况下，您可以将指令用作
<some-component [name.foo]="'Some foo'" [name.bar]="'Some bar'"></some-component>，这将注入到组件中的"名称"对象。

我不推荐这种方式，但是可以实现。